爲什麼這個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>

來源

2009-04-29 Xaisoft

你應該表現出最終的標記，這是瀏覽器看到的東西，而不是你使用生成的代碼。 – Anonymous 2009-04-29 21:04:29

您應該將它們都浮起來以獲得您描述的佈局。 div s默認使用塊顯示進行渲染，如果不將它們浮動，它將在＃2和＃3之間進行換行。

來源

2009-04-29 21:02:22

我以爲一旦你在塊級元素上做了一個浮動，其他元素就會自動浮在它旁邊，除非你清楚。這是正確的還是我誤解了一些東西？ – Xaisoft 2009-04-29 21:04:22

好吧，第二個div放在旁邊，就像你說的那樣。但是，因爲它不是浮動的並且是一個塊，所以它和第三個div之間會出現換行符，這會導致它下移。使用Firefox的Web Developer插件並打開塊級元素的輪廓可以幫助您直觀地理解這類事物，我發現。 – 2009-04-29 21:07:31

將所有三個div浮動到左邊。

另外，您必須爲浮動元素設置顯式寬度。

來源

2009-04-29 21:04:12

帶有列表框的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>

來源

2009-04-29 21:06:45

爲什麼這個div不能正確地浮動？

回答

相關問題