Подтвердить что ты не робот

Как поместить 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

Возможно ли это?

4b9b3361

ОТВЕТЫ

Ответ 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 или добавить префикс поставщика вручную.