如何防止DIV滑過對方

Question

我打算使用基於DIV的佈局而不是基於表格來減少標記數量並加快頁面加載速度，但是我發現它太複雜了，不是CSS大師。我使用以下CSS類來模擬包含一列標籤和一列文本框的表格行。

.FormItem 
{ 
    margin-left: auto; 
    margin-right: auto; 
    width: 604px; 
    min-height: 36px; 
} 
.ItemLabel 
{ 
    float: left; 
    width: 120px; 
    padding: 3px 1px 1px 1px; 
    text-align: right; 
} 
.ItemTextBox 
{ 
    float: right; 
    width: 480px; 
    padding: 1px 1px 1px 1px; 
    text-align: left; 
} 

，

<div class="FormItem"> 
    <div class="ItemLabel"> 
      <asp:Label ID="lblName" runat="server" Text="Name :"></asp:Label> 
     </div> 
     <div class="ItemTextBox"> 
      <asp:TextBox ID="txtName" runat="server"></asp:TextBox> 
      <p><span>User Name</span></p> 
     </div> 
</div> 
<div class="FormItem"> 
     <div class="ItemLabel"> 
      <asp:Label ID="lblComments" runat="server" Text="Comments :"></asp:Label> 
     </div> 
     <div class="ItemTextBox"> 
     <asp:TextBox ID="txtComments" runat="server"></asp:TextBox> 
      <p><span>(optional)Comments</span></p> 
     </div> 
</div> 

這些樣式正常工作，如果的ItemData的DIV的高度是小於或等於的FormItem的DIV最小高度。如果ItemData DIVs的高度超過FormItem的高度，則ItemText DIV將開始滑過FormItem DIVs並且ItemText和ItemData不再對齊。例如下面的標記...

<div class="FormItem"> 
    <div class="ItemLabel"> 
     <asp:Label ID="lblName" runat="server" Text="Name :"></asp:Label> 
    </div> 
    <div class="ItemTextBox"> 
     <asp:TextBox ID="txtName" runat="server"></asp:TextBox> 
     <p><span>User Name</span></p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
    </div> 
</div> 
<div class="FormLabel"> 
    <div class="ItemText"> 
     <asp:Label ID="lblComments" runat="server" Text="Comments :"></asp:Label> 
    </div> 
    <div class="ItemTextBox"> 
    <asp:TextBox ID="txtComments" runat="server"></asp:TextBox> 
     <p><span>(optional)Comments</span></p> 
    </div> 
</div> 

我已經嘗試了幾個CSS屬性，如;位置，浮動，清除...但我無法糾正問題。我將不勝感激任何幫助。

Answer 1

當節點是浮動它們被拉出佈局流程，因此不知道其他節點（並且在碰撞時不會縮小）。

Answer 2

檢查出在這裏了類似的模式：

Professional forms layout in column

Answer 3

當進行兩欄佈局有很多可以使用的方法和大量的在某些情況下陷阱的。

用於簡單的佈局，要複製的表狀結構的基本方法，可以使用這種方法

<div class="outer"> 
    <div class="row"><label>Name:</label><p>Content</p></div> 
    <div class="row"><label>Name2:</label><p>Content</p></div> 
</div> 

可以按如下方式設置樣式：

.outer { width: 800px;} 
.outer .row { float: left; width: 100%; overflow: visible;} 
.outer .row label { width: 100px; float: left; } 
.outer .row p { width: 700px; float: left; margin: 0;} 

這給了你雙列布局，左側爲label s，右側爲p。注意：label和p都會左移，因爲無論容器有多寬，您都希望它們接觸。

如果您希望佈局在調整大小時更流暢，您需要查看更先進的技術。最終，如果不使用table而不使用display: table,display: table-cell等（它們在IE 6或7中不起作用），則複製整個表格佈局渲染非常困難。

對於您的示例，您可能需要將p替換爲div;但關鍵是要將所有左側內容放在同一個容器下，以便與相應的label正確對齊。