为什么这个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>
您应该将它们都浮起来以获得您描述的布局。 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>
你应该表现出最终的标记,这是浏览器看到的东西,而不是你使用生成的代码。 – Anonymous 2009-04-29 21:04:29