如何制作2列布局，其中项目从上到下(而不是从左到右)开始? [英] How do I make a 2 column layout where items starts from top to bottom (not left to right)?

问题描述

基本上我想要做的是拥有这种布局:

Essentially what I want to do is to have this kind of layout:

"item-1" "item-5"

"item-2" "item-6"

"item-3" "item-7"

"item-4" 

请注意，项目从上到下而不是从左到右.

Please notice that items go from top to bottom and not from left to right.

编辑:列表中有多少项是未知的

It is unknown how many items are in the list

推荐答案

尝试CSS多列布局

.column {
  -webkit-column-count: 2; 
  -webkit-column-gap: 40px;
  -moz-column-count: 2;
  -moz-column-gap: 40px;
  column-count: 2;
  column-gap: 40px;
}

<div class="column">
  <p>item-1</p>
  <p>item-2</p>
  <p>item-3</p>
  <p>item-4</p>
  <p>item-5</p>
  <p>item-6</p>
  <p>item-7</p>
</div>

这篇关于如何制作2列布局，其中项目从上到下(而不是从左到右)开始?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！