Как предотвратить скольжение 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>

Эти стили работают нормально, если высота DIV ItemData меньше или равна минимальной высоте DIV FormItem. Если высота DIVs ItemData превышает высоту FormItem, то DIV ItemText начинают скользить по DIV FormItem, а 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

При создании двухколоночного макета вы можете использовать множество подходов, а в некоторых случаях - множество ошибок.

Базовый подход для простых макетов, где вы хотите воспроизвести структуру, похожую на таблицу, может использовать этот подход

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

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

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

Answer 3

Когда узлы плавают , они извлекаются из потока компоновки и поэтому не знают о других узлах (и не будут сокращаться при столкновении).