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

【问题标题】：Why isn't this div floating properly?为什么这个 div 不能正确浮动？
【发布时间】：2009-04-29 21:00:04
【问题描述】：

我有两个列表框和两个按钮。每个列表框都在自己的 div 中，两个按钮在自己的 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>

【问题讨论】：

你应该显示最终的标记，这是浏览器看到的，而不是你用来生成它的代码。

标签： asp.net html css

【解决方案1】：

您可能应该将它们全部浮动以获取您描述的布局。 divs 默认使用块显示进行渲染，如果您不浮动它们，它将在 #2 和 #3 之间放置一个换行符。

【讨论】：

我认为一旦你在块级元素上浮动，其他元素会自动浮动在它旁边，除非你清除。这是正确的还是我误解了什么？
嗯，正如你所说，第二个 div 确实放在它旁边。但是，因为它没有浮动并且是一个块，所以它在它和第三个 div 之间放置了一个换行符，这导致它低于。我发现，使用 Firefox 的 Web Developer 插件并打开块级元素的轮廓可以帮助您直观地理解这类事情。
@Xaisoft：未浮动元素的布局与通常一样，但它们“包裹”在浮动元素周围。

【解决方案2】：

将所有三个 div 向左浮动。

此外，您必须为浮动元素设置明确的宽度。

【讨论】：

CSS 2.1 中的宽度要求放宽了。
@Anonymous：我不知道。谢谢。

【解决方案3】：

带有列表框的第一个 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>

【讨论】：