如何制作 2 列布局，其中项目从上到下（而不是从左到右）开始？答案

【问题标题】：How do I make a 2 column layout where items starts from top to bottom (not left to right)?如何制作 2 列布局，其中项目从上到下（而不是从左到右）开始？
【发布时间】：2019-11-18 14:54:05
【问题描述】：

基本上我想做的是有这样的布局：

"item-1" "item-5"

"item-2" "item-6"

"item-3" "item-7"

"item-4"

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

编辑：不知道列表中有多少项目

【问题讨论】：

这里有更全面的讨论stackoverflow.com/q/50693793/4711754

标签： html css flexbox css-grid

【解决方案1】：

这是链接，如图所示，您可以通过重新排列项目来选择网格的显示方式。 https://www.w3schools.com/css/css_grid_item.asp

【讨论】：

【解决方案2】：

如果您了解 div 和 inline-block，请尝试在主 div 下进行两个分区并给出 display: inline-block 属性。通过这种方式，您可以根据需要轻松设置边距和尺寸。这应该可以解决您的问题。

【讨论】：

【解决方案3】：

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

【讨论】：

这似乎有效。我现在遇到的问题是，如果我有一个多行文本，它的一半会被剪切并出现在第二列。我怎样才能确保它不会被切割？这有意义吗？