Question

我有两个列表框和两个按钮。每个列表框都在它自己的div中，两个按钮在它们自己的div中。一个列表框应位于左侧，两个按钮应位于右侧，另一个列表框位于按钮右侧。这是我正在使用的标记，但它将第二个列表框放在Remove按钮下面。

<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>

Answer 1

你应该将它们全部浮动以获得你描述的布局。 div默认情况下使用块显示进行渲染，如果不浮动它们，则会在＃2和＃3之间放置换行符。

Answer 2

向左浮动所有三个div。

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

Answer 3

带有列表框的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没有正常浮动？

3 个答案: