2012-10-12 4 views
0

나는 제목 표시 줄 div가있는 패널 div가 있습니다. 제목 표시 줄에서 (런타임에 결정될) 오른쪽에 여러 가지 다른 아이콘이있을 수 있습니다. 아이콘이 가능한 한 오른쪽으로 멀리 쌓일 것이고, 또한 제목 텍스트가 아이콘 위로 실행되지 않도록 CSS를 구성하려고합니다. 즉, 다음과 같은 경우 새 줄로 둘러 쌀 것입니다. 필요한). 나는 그걸 제대로 이해하지 못했습니다. 내 아이콘의 경우 <img class="icon" ...>입니다.여러 엘레멘트가 연속적으로 떠 다니는 CSS

.icon { 
display: block; 
float: right; 
padding-left: 4px; 
} 

아이콘이 잘 표시됩니다. 그러나 실제 제목을 추가하려고 할 때 상황이 불안해집니다. 남은 공간을 왼쪽으로 정확하게 차지할 수있는 제목을 얻지 못하는 것 같습니다. div (또는 내가 시도한 스팬)는 완전히 아이콘 아래 또는 위입니다. 또는 때로는 타이틀의 길이에 따라 아이콘이 오른쪽으로 세로로 쌓일 수도 있습니다.

본질적으로, 내가 찾고있는 것은 하나 이상의 작은 픽스 크기의 요소가 오른쪽 위 가로로 쌓여 있고, 나머지 요소가 왼쪽의 나머지 공간을 차지하고 있으며,이 마지막 요소는 끝날 수 있습니다 텍스트 줄 바꿈이 있는지 여부에 따라 세로로 더 많은 공간을 차지합니다.

도움이 될 것입니다. 내가이 일 것 같아

white-space: nowrap; 

답변

0

당신은 힘의 도움말 텍스트가 있습니다.

기본적으로 div 내에서 제목 텍스트를 사용했습니다 (시도한 스팬). 그러나 내가 어떤 것으로도 넣지 않으면 (즉, 메인 타이틀 div의 일부) 모든 것이 제대로 작동하는 것 같습니다.

0

: 요소의 CSS에 다음과 같은 규칙을 추가

관련 문제