浮動DIV問題

Question

這裏是我的代碼演示http://jsfiddle.net/mn7Ut/ 我似乎無法找到一種方法來正確添加h1下的文本。這是當我嘗試添加一些文字時會發生什麼http://jsfiddle.net/uY3pQ/ 這次我做錯了什麼？ ：C

div {margin:0; padding:0;} 


#wrap { 
    background-color:#000000; 
    width:auto; 
    float:left; 
    padding:50px; 
    } 


.container { 
    width:500px; 
    background:#666666; 
    color:#FFFFFF; 
    float:left; 
    margin-right:25px; 
    } 

.left { 
    float:left; 
    display:block; 
    } 

.padding { 
    padding:30px; 
    } 

.list { 
    background-color:#333; 
    } 

.box { 
    background-color:#ccc; 
    width:100px; 
    } 

h1 { 
    color:#000; 
    background:#ddd; 
    } 

。

<div id="wrap"> 

    <div class="container"> 
     <div class="box-container"> 
      <h1 class="left padding">Some text here</h1> 
       <ul class="list padding left"> 
        <li>Some text here Some text here</li> 
        <li>Some text here Some text here</li> 
        <li>Some text here Some text here</li> 
        <li>Some text here Some text here</li> 
        <li>Some text here Some text here</li> 
        <li>Some text here Some text here</li> 
        <li>Some text here Some text here</li> 
        <li>Some text here Some text here</li> 
       </ul> 
     </div> 
    </div> 

    <div class="box padding left"> 
    Some text here Some text here Some text here 
    </div> 

</div> 

Answer 1

你可以包裝在一個容器中的H1和文字，浮它留給：

HTML

<div class="left inner" > 
    <h1 class="padding">Some text here</h1> 
    text text text text text text text text 
</div>   

CSS

.inner{ 
    display:inline-block; 
    width:200px; 
} 

爲完整的解決方案http://jsfiddle.net/uY3pQ/5/

見小提琴

• 測試鉻