Есть ли способ заставить один элемент списка на столбец, используя многостолбцовый макет? - PullRequest
Новая
       3

Есть ли способ заставить один элемент списка на столбец, используя многостолбцовый макет?

1 голос
/ 22 марта 2020

У меня есть несколько простых HTML и CSS, чтобы разбить список на 4 столбца. Вместо обычного поведения, при котором каждый элемент списка помещается в какой-либо столбец, в котором достаточно места, я хочу заставить его поместить каждый элемент списка в отдельный столбец.

Так что в моем примере <li>Column 1</li> всегда будет быть только в 1-й колонке. <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li> всегда будет только во 2-м столбце. То же самое с колонками 3 и 4.

Есть ли способ выполнить sh при использовании свойства columns? 

ul.data-points {
  columns: 4;
  column-gap: 20px;
}
<ul class="data-points">
  <li>Column 1</li>
  <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
  <li>Column 3</li>
  <li>Column 4</li>
</ul>

Ответы [ 2 ]

2 голосов
/ 22 марта 2020

Это больше подходит для CSS сетки: 

ul.data-points {
  display:grid;
  grid-auto-flow:column;
  column-gap: 20px;
}
<ul class="data-points">
  <li>Column 1</li>
  <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
  <li>Column 3</li>
  <li>Column 4</li>
</ul>
0 голосов
/ 22 марта 2020

как ответили пару часов go. в 2 списки столбцов разделяются его заголовком

установите li для inline-block, чтобы избежать его разбрызгивания через столбцы и нижнего отступа или поля, как мы надеемся, pu sh от следующего к следующему столбцу.

Однако, это выглядит как типичная сетка или гибкий макет, а не CSS Столбец .

Демонстрация ниже демонстрирует, как неэффективно css столбец здесь. 

ul.data-points {
  columns: 4;
  column-gap: 20px;
}
li {display:inline-block;width:100%;margin-bottom:100%;}
<ul class="data-points">
  <li>Column 1</li>
  <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
  <li>Column 3</li>
  <li>Column 4</li>
</ul>
...