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

问题描述

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

"item-1" "item-5"项目 2" 项目 6"项目 3" 项目 7"第 4 项"

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

不知道列表中有多少项

解决方案

尝试 CSS 多列布局

.column {-webkit 列数:2；-webkit-column-gap: 40px;-moz 列数:2；-moz-column-gap: 40px;列数:2；列间距:40px；}

<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>

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.

EDIT: It is unknown how many items are in the list

解决方案

Try CSS Multi-column Layout

.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屋！