为什么这个div不能正确地浮动？

问题描述：

我有两个列表框和两个按钮。每个列表框都在它自己的div中，两个按钮都在它们自己的div中。一个列表框应该在左边，两个按钮应该在右边，而另一个列表框则在按钮的右边。这是我正在使用的标记，但它将第二个列表框放在Remove按钮下面。为什么这个div不能正确地浮动？

<p>Available Colors</p> 
    <div style="float:left; margin:5px;"> 
     <asp:ListBox ID="lstAvailableColors" runat="server"></asp:ListBox> 
    </div> 
    <div> 
     <asp:Button ID="btnAdd" runat="server" Text="Add" /><br /> 
     <asp:Button ID="btnRemove" runat="server" Text="Remove" /> 
    </div> 
    <div style="margin:5px;"> 
     <asp:ListBox ID="lstSelectedColors" runat="server"></asp:ListBox> 
    </div>

你应该表现出最终的标记，这是浏览器看到的东西，而不是你使用生成的代码。 – Anonymous 2009-04-29 21:04:29

答

您应该将它们都浮起来以获得您描述的布局。 div s默认使用块显示进行渲染，如果不将它们浮动，它将在＃2和＃3之间进行换行。

我以为一旦你在块级元素上做了一个浮动，其他元素就会自动浮在它旁边，除非你清楚。这是正确的还是我误解了一些东西？ – Xaisoft 2009-04-29 21:04:22

好吧，第二个div放在旁边，就像你说的那样。但是，因为它不是浮动的并且是一个块，所以它和第三个div之间会出现换行符，这会导致它下移。使用Firefox的Web Developer插件并打开块级元素的轮廓可以帮助您直观地理解这类事物，我发现。 – 2009-04-29 21:07:31

答

将所有三个div浮动到左边。

另外，您必须为浮动元素设置显式宽度。

答

带有列表框的fisrt div将浮动到左侧，其他div将占用页面上剩余空间，该剩余空间位于向左浮动的div右侧。

它是你需要的3列布局吗？如果是这样，你需要像这样

<div style="float:left; width:66%"> 
    <div style="float:left; width:50%"></div> 
    <div style="float:right; width:50%"></div> 
</div> 
<div style="float:right; width:33%"></div>

为什么这个div不能正确地浮动？

相关推荐