float：left問題

Question

我在我的頁面有3個div。以blok1，blok2和blok3命名。

我加入到{浮動：左;}爲blok1格但得到這樣的結果：

screenshot link

我想要得到這樣的結果。

screenshot link2

Answer 1

你應該添加浮動屬性blok1和blok2爲了得到一個旁邊其他。

注意：每個div必須有一個定義的寬度和高度。

Answer 2

試試這個：

<style type="text/css"> 
    #wrap div { 
     border: 1px solid #000; 
     float: left; 
     margin: 5px; 
     padding: 5px; 
    } 
    #div3 { clear: left; } 
</style> 

<div id="wrap"> 
    <div id="div1">div1</div> 
    <div id="div2">div2</div> 
    <div id="div3">div3</div> 
</div> 

Answer 3

所以http://jsfiddle.net/6v5gM/

，而不是http://jsfiddle.net/JmWZp/1/

只是使用顯示：表;了div

Answer 4

你應該有它這樣的

#blok1 {float:left;} 
#blok2 {float:right;} 
#blok3 {clear:both;} 

或理想

如果你想讓它像一列，你應該使用它是這樣的。

#ltCol {float:left;} 
#rtCol {float:right;} 

<div id="ltCol"> 
    <div id="blok1"></div> 
    <div id="blok1"></div> 
</div> 
<div id="rtCol"> 
    <div id="blok2"></div> 
</div> 
<div style="clear:both;"></div>