浮動div丟失父母課程明確：都;？

我在嘗試在兩行之間放置邊框時遇到了一些麻煩。它目前只做第一行。浮動div丟失父母課程明確：都;？

我已經使用clear：both;對於一排新的div，但它似乎帶走了邊界的父div風格。

<style type="text/css"> 
.box { 
    border: 1px solid #E5E5E5; 
    border-radius: 4px 4px 4px 4px; 
    width: 90%; 
} 
</style> 

<div class="box"> 
    <div style="float:left; width:150px;"> 
     Row 1, Column 1 
    </div> 
    <div style="float:left; width:150px;"> 
     Row 1, Column 2 
    </div> 

    <div style="clear:both;"></div> 

    <div style="float:left; width:150px;"> 
     Row 2, Column 1 
    </div> 
    <div style="float:left; width:150px;"> 
     Row 2, Column 2 
    </div> 
</div>

感謝

來源

2012-02-14 arbme

如果您想要保持相同的HTML結構，只需在最後一個div後面添加一個clear:both容器即可。 http://jsfiddle.net/7cptj/

來源

2012-02-14 01:52:24 davidgmar

感謝有點骯髒的時刻;） – arbme 2012-02-14 02:50:45

我的榮幸！ :) – davidgmar 2012-02-14 02:58:42

嘗試的第二行之後加入清算股利。這應該可以解決您的問題。

原因是當你浮動一個元素時，你或多或少地將它從它的父元素中分離出來。 clear: both將相對較低的空白元素放置到浮動div上，從而保持浮動div通常佔據的「空間」。

來源

2012-02-14 01:50:55 fayerth

浮動div丟失父母課程明確：都;？

回答

相關問題