CSS는이 코드를 다음 요소

Question

에 따라 포장 텍스트를 강제

<div> 
    <h1>long string </h1> 
    <div class="button"> 
     <a>button1</a> 
     <a>button2</a> 
     <a>buttonX</a> 
    </div> 
</div> 

CSS는 : 여기

h1 { 
    float:left; 
    vertical-align:top; 
} 
.button { 
    float:right; 
} 

.button a { 
    display:inline-block; 
    width:100px; 
    background-color:red; 
    vertical-align:top; 
    margin:5px; 
} 

이의 jsFiddle : http://jsfiddle.net/a88rB/1/

간단하게하기 위해 최소 태그 만 유지했습니다.

현재 (버튼과 함께 h1과 div)는 한 줄에 있습니다. 그러나 만약 H1 때문에

<h1>long string long string long string long string long string long string long string long string long string long string </h1> 

http://jsfiddle.net/a88rB/2/

버튼과 같은 진정한 긴 문자열은 H1에서 푸시입니다.

내가 갖고있는 버튼의 수를 항상 알지 못합니다.

div.button의 너비를 콘텐츠로 설정하고 h1의 너비를 나머지 부모로 설정하여 h1이 충분히 길면 텍스트로 감싸고 버튼을 벗어나지 않게 할 수 있습니까? 상단에?

추신. 나는 IE7

에 대한 지원이 필요하지 않습니다

Answer 1

Fiddle! 버튼이 상단에 머물 수 있도록 당신은 당신의 HTML을 다시 정렬 할 수 있습니다 :

<div> 
    <div class="button"> 
     <a>button1</a> 
     <a>button2</a> 
     <a>buttonX</a> 
    </div> 
    <h1>long string long string long string long string long string long string long string long string long string long string </h1> 
</div> 

을 그리고 당신이 원하는 경우 <h1>이 같은 '라인에서 시작, 상단에 머물 '이면 h1 { float:left; } 규칙을 삭제하십시오.