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

发布于03月23日

我画了一个我需要做的布局的草图:drawing of the desired layout

My problem is:个如何使物品"4"和"5"根据放置在其上方的物品的高度而不对齐而自动定位

我try 了以下三种解决方案，但都没有成功:

使用css网格:css网格允许我根据需要放置5个元素，除了这个高度对齐问题！使用css网格，无论元素"2"和"3"的高度如何，元素"4"和"5"都会对齐.
使用css flex:css flex允许我根据需要定位5个元素，除了这个高度对齐问题！

我得到了this page的帮助，但即使使用"Align-Items"和"Align-Self"，我也不能让"4"和"5"按比例上升到"2"和"3"的高度

石工:我也try 过这种方法:

Masonry method URL
DEMO url

此方法使用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%;
}

我使用这种方法的问题是，项在列中垂直显示

这是一个新闻网站，元素的显示顺序非常重要:元素必须按水平顺序显示

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

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

推荐答案

Css相关问答推荐

使用location：stickly将元素固定到其父容器的顶部

为什么图像加载请求没有显示在我的网络请求中？

使用背景滤镜时，伪元素出现在div之前

如何为FLEX方向编写响应式的CSS

Astro网站在使用Astro Build构建后无法正常工作

如何使背景出现在具有自己背景 colored颜色的子元素上

Tailwind CSS 不输出背景类

当值小于 1 时理解 flex-shrink

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

CSS中元素的重叠

停止 div 推动另一个 div 做出react

在同一旋转中以度数变换旋转

如何更改下拉列表的宽度？

使用 CSS 在悬停时转换 SVG 路径的填充属性

flex-start 和基线有什么区别？

媒体查询以错误的宽度触发

使用 CSS/HTML 更改悬停图像

如何在 javascript 中获取 HTML 元素的样式值？

表格溢出时水平滚动

如何在页面上居中 twitter bootstrap 选项卡？