Использование CSS для разметки, очистка поплавка для указания на следующей строкеНеобходимо создать макет из 2 столбцов и 5 строк

Question

Я создал макет, используя DIV, а не таблицы. Кажется, это работает ... Я должен был очистить: ни один после каждого div, состоящего из столбца и содержимого.

Но я получаю дополнительную строку под каждыми 2 столбцами, прежде чем начнутся другие 2 столбца. Я приведу свой код ниже, что я делаю неправильно? .. Что я хочу сделать, так это создать макет в виде таблицы, но используя div, состоящий из 5 строк, и каждая строка имеет 2 столбца.

 <div id="column1" style="float:left;width:200px;">1st Title</div>
 <div id="container1" style="float:left;"> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></div>
 <div style="clear:both;"></div>
 <div id="column2" style="float:left;width:200px;">2nd Title</div>
 <div id="container2" style="float:left;"> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></div>
 <div style="clear:both;"></div>

Answer 1

Вот класс CSS, который устранит проблему.

.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

Answer 2

Почему бы вам не использовать атрибут display вместо float , например (вам нужно сгруппировать ваши div в классе "row"):

.row {
    display: table-row;
}

#column1, #container1, #column2, #container2 {
    display: table-cell;
}

Answer 3

Я почти уверен, что вы можете получить тот же эффект, добавив clear: left к вашим column div с и clear: right к вашим container div с.

Редактировать:На самом деле, я ожидал бы, что clear:left в column будет достаточно, но если бы это было правдой, создание табличных макетов с использованием float было бы легко, и это никогда не будет.