如何强制div取消浮动

我通常使用表格进行布局。但我想尝试Div的布局。这里是问题，当我“浮动：离开”一个div时，它使随后的div浮动。我试图把“float：none”放到下一个div中，让它打破一条线但它不起作用。如何强制div取消浮动

这是我想用表做：

<hr style="width: 100%;" /> 
<table> 
    <tr> 
    <td> 
     <div id="divLeftPane"> 
     ... 
     </div> 
    </td> 
    <td> 
     <div id="divCenterPane"> 
     ... 
     </div> 
    </td> 
    <td> 
     <div id="divRightPane"> 
     ... 
     </div> 
    </td> 
    </tr> 
</table> 
<hr style="width: 100%;" />

这是我迄今试图与格使用浮动：

<hr style="width: 100%;" /> 
<div id="divContainer"> 
    <div id="divLeftPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divCenterPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divRightPane"> 
    ... 
    </div> 
</div> 
<hr style="width: 100%;" />

与使用DIV的问题是底部

也被漂浮在左边。我试着把float：none放到最后一个div，HR标签甚至divContainer。为什么最后一个小时是浮动的？

来源

2010-01-19 Nap

这会给你想要的效果：

<hr style="width: 100%;" /> 
<div id="divContainer"> 
    <div id="divLeftPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divCenterPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divRightPane" style="float:left; "> 
    ... 
    </div> 
    <div style="clear: left;"></div> 
</div> 
<hr style="width: 100%;" />

浮动3个div的左会让他们出现并排，但是你会发现，divContainer不走div标签的高度，里面。添加明确的div：left基本上解除了这一点。

编辑：避免内联样式，当你这样做是真实的。

来源

2010-01-19 02:45:29 wsanville

使用属性

明确：左;

在底部元件上。

来源

2010-01-19 02:22:20

加入

#divContainer { 
    overflow: hidden; 
}

将在年底

做到这一点没有额外的div

来源

2011-01-12 21:15:37

如何强制div取消浮动

回答

相关问题