Как поместить div в CSS?
У меня есть этот список в HTML, и я бы хотел заказать его по столбцам. Я попытался использовать float, это дает мне следующее:
РЕДАКТИРОВАТЬ:
Высота этих <li>
составляет undefined, но я бы хотел, чтобы C ниже B, E ниже E и G ниже F без изменения структуры и изменили порядок. Я не хочу использовать абсолютную позицию. Мне интересно, есть ли другие решения.
HTML:
<ul>
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<ul>
ВЫХОД (используя float: left; width: 240px; border-left: 1px solid #EEE
):
![enter image description here]()
То, что я хочу, больше похоже на ниже, без изменения HTML, потому что я уже использую эту структуру, чтобы реагировать.
![enter image description here]()
Возможно ли это?
Ответы
Ответ 1
Вы можете использовать столбец CSS и нижний край в первом теге LI, как это.
ul {
column-count:4;
padding:0;
column-rule: solid lightgray 1px;
}
li {
display:inline-block;
width:100%;
}
li:before {/* demo purpose to set an height to lis */
content:'';
float:left;
padding-top:50%;
}
li:first-of-type {
margin-bottom:50%;
}
Вам может понадобиться префикс JavaScript или добавить префикс поставщика вручную.