Как предотвратить перемещение DIVs друг от друга

Question

Я собираюсь использовать макет на основе DIV вместо таблицы, чтобы уменьшить количество разметки и ускорить загрузку страницы, однако я счел это слишком сложным, m не гуру 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 DIVs меньше или равна FormItem DIVs мин-высота. Если высота элемента ItemData DIV больше, чем высота FormItem, то ItemText DIVs начнет перемещаться по элементам 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, таких как; положение, float, clear ... но я не могу исправить проблему. Я буду признателен за любую помощь.

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, а справа - p. Примечание: остатки label и p оставлены, потому что вы всегда хотите, чтобы они касались независимо от ширины контейнера.

Если вы хотите, чтобы макет был более жидким при изменении размера, вам необходимо изучить более сложные методы. В конечном счете очень сложно воспроизвести полный рендеринг таблицы, не используя table, если вы не используете display: table, display: table-cell и т. Д. (Которые не работают в IE 6 или 7).

Для вашего примера, возможно, вы захотите заменить p на div; однако ключ должен поместить все содержимое левой стороны под один и тот же контейнер, чтобы он был правильно выровнен с соответствующим label.