如何按列垂直对齐项目，但不在列内水平对齐

Question

我画了一个我需要做的布局草图：见附图

我的问题是： 如何使文章“4”和“5”根据位于它们上方的文章的高度定位自己，并且不对齐

我尝试了这 3 种解决方案但没有成功：

1/ 使用 css Grid -> css grid 允许我根据需要定位 5 个元素，除了这个高度对齐问题！ 使用 css 网格，无论元素“2”和“3”的高度如何，元素“4”和“5”都对齐

2/ 使用 css Flex -> css flex 允许我根据需要定位 5 个元素，除了这个高度对齐问题！ 我从这个页面得到了帮助： 网址： 但即使使用“align-items”和“align-self”我也无法让项目“4”和“5”与项目“2”和“3”的高度成比例地上升

3/ MASONRY -> 我也尝试过这种方法：

砌体方法网址 演示网址

此方法使用css中的列：

.masonry { /\* Masonry container \*/
column-count: 4;
column-gap: 1em;
}

.item { /\* Masonry bricks or child elements \*/
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}

我对这种方法的问题是项目在列内垂直显示

这是一个新闻站点，元素显示的顺序很重要：元素必须水平显示顺序

Answer 1

试试这个：

.container {
  display: flex;
  justify-content: center;
  width: 100%;  
}    
.item {
  background-color: green;
  margin: 10px;
}
.col {
  display: flex;
  flex-direction: column;
}

  <div class="container">
    <div class="col col1">
      <div class="item">Item 1</div>
    </div>
    <div class="col col2">
      <div class="item">Item 2</div>
      <div class="item">Item 4</div>
    </div>
    <div class="col col3">
      <div class="item">Item 3</div>
      <div class="item">Item 5</div>
    </div>
  </div>

Answer 2

没有有效的代码片段很难调试，但如果我理解正确，我会按如下方式进行。

使用 flexbox 方法让你到达那里的大部分时间，但是将第 2 + 3 列放在一个单独的

<div>

这将使第 4 + 5 列在它下面对齐，从最大的 2 + 3 列的绝对底部开始。

或者，为所有列设置一个

min-height

，使它们都在相同的高度对齐。

Answer 3

我推荐Macy.js。调用文档：

使用脚本标签包括：

<script src="https://cdn.jsdelivr.net/npm/macy@2"></script>

并在 JavaScript 中添加以下代码：

var macy = Macy({
    container: '#macy-container', //Change to the parent element of the articals
    trueOrder: true,
    waitForImages: false, //If there are images set this to true
    margin: 24, //The gap between the columns
    columns: 2, //Total columns
    breakAt: { //Columns for each screen width (optional)
        1200: 5,
        940: 3,
        520: 2,
        400: 1
    }
});

查看文档以获取更多信息。

希望对您有所帮助！