CSS中具有不同高度的块的垂直对齐
我正试图达到类似的效果。也就是说，我有一些块（这里是，CSS中具有不同高度的块的垂直对齐,css,Css,我正试图达到类似的效果。也就是说，我有一些块（这里是，文章），它们具有相同的宽度，但可以具有不同的高度，我希望它们紧挨着它们的上邻居。当以内联方式显示文章并使用顶部垂直对齐方式时，文章仍按预期保持在其行上： <html> <head> <style> article { display: inline-block; vertical-align: top; width:200px; margin:5px; background-color:#D0D0D0;
文章<html>
<head>
<style>
article { display: inline-block; vertical-align: top; width:200px; margin:5px; background-color:#D0D0D0; }
</style>
</head>
<body>
<div style="width:630px; background-color:#F0F0F0">
<article style="height:100px;"></article><article style="height:200px;"></article><article style="height:300px;"></article><article style="height:200px;"></article><article style="height:200px;"></article><article style="height:100px;"></article>
</div>
</body>
</html>
文章{显示：内联块；垂直对齐：顶部；宽度：200px；边距：5px；背景色：#d0d0；}
文章我没有提到的链接页面的一个重要行为是，文章的显示顺序与列出的顺序大致相同，因此保留了时间顺序。例如，您可以使用CSS列
div{
宽度：630px；
背景色：#f0
}
div{
-webkit列数：3；
-moz列数：3；
列数：3；
-webkit列间距：0；
-moz列间距：0；
列间距：0；
}我用CSS尝试了许多不同的方法来实现这一点，在我看来（我讨厌这么说），单用CSS是不可能的 Flexbox、网格、列、表格布局、浮动。。。我尝试的技术都无法处理这个特定的布局问题 我能得到的最接近的是flexbox或float与clearfixes的结合。然而，当你的网站响应迅速时，你会遇到很多布局问题 潜在的问题是，您事先不知道容器的高度。您必须计算高度，并根据高度重新排列所有其他容器（并且您必须为将来/过去创建的每个容器执行此操作）
因此，您可以尝试使用CSS，您可能会接近（当忽略旧浏览器时，可以使用CSS计算框，
第n个子项- 显示：内联块
- 显示：表格
- 漂浮
- 纵队
- 柔性箱
$（函数（）{
$（'.mashise'）。mashise({
//选择权
项目选择器：'.Massive article'}）；
});
hr{
清除：左；
}
文章{
宽度：32%；
边缘顶部：15px；
颜色：#fff；
字体大小：20px；
}
.直列整块文章{
显示：内联块；
垂直对齐：顶部；
}
.浮动条款{
浮动：左；
宽度：32%；
左边距：3倍；
}
.栏目{
-webkit列数：3；
-moz列数：3；
列数：3；
-webkit列间距：0；
-moz列间距：0；
列间距：0；
}
.专栏文章{
宽度：100%；
}
.flexbox{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
最大高度：500px；
}
.flexbox文章{
左边距：3倍；
}
.砖石制品{
左边距：3倍；
}
内联块：
1.
2.
3.
4.
5.
6.
浮动：
1.
2.
3.
4.
5.
6.
柱：
1.
2.
3.
4.
5.
6.
Flexbox：
1.
2.
3.
4.
5.
6.
砌体（JS）：
1.
2.
3.
4.
5.
6.
您给出的示例（blaskdemo）使用javascript检测下一个可用的最高位置，然后使用内联样式（例如style=“position:absolute；left:349px；top:252px；不透明性：1；
）将下一篇文章放在那里。我怀疑这可以在纯CSS中完成。这是一个很好的解决方案，但由于列的填充顺序，与我提供的示例不同。我将编辑我的问题以明确说明这一点。