gpt4 book ai didi

css - CSS中具有不同高度的 block 的垂直对齐

转载 作者:行者123 更新时间:2023-11-28 09:05:50 24 4
gpt4 key购买 nike

<分区>

我正在尝试实现类似于 this 的效果.也就是说,我有一些 block (此处为 articles),它们具有相同的宽度但可以具有不同的高度,我希望它们紧挨着它们上面的邻居。当内联显示文章并使用顶部垂直对齐方式时,文章仍按预期保持在行上:

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

我想如果我将文章设置到预定义的列中会更容易 然后 在该列中垂直对齐,但是 AFAICT 在上面给出的示例中情况并非如此(可能具有以下优势能够动态更改列数)。

这甚至可以在 CSS 中实现吗?还是他们使用了一些复杂的 JavaScript 来实现这一目标?

(另外作为旁注,我需要让 articles 彼此相邻且没有换行符,以防止中间出现虚假的空白,但这似乎不是问题上面的页面)。

编辑

我链接的页面的一个重要行为是我没有提到的是文章的显示顺序与它们列出的顺序或多或少相同,例如,时间顺序得以保留。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com