HTML CSS如何显示具有相同宽度和不同高度的元素

Question

我有很多类似卡片的元素，它们要像这张图片一样显示相同宽度但不同高度的

如何使用样式来实现这一目标？

Answer 1

CSS具有称为列的属性，它为您提供以列布局显示元素的内容，您可以使用它来实现所描述的内容。

<div>
    <img src="http://via.placeholder.com/100x60">
    <img src="http://via.placeholder.com/100x80">
    <img src="http://via.placeholder.com/100x100">
    <img src="http://via.placeholder.com/100x120">
    <img src="http://via.placeholder.com/100x140">
    <img src="http://via.placeholder.com/100x160">
    <img src="http://via.placeholder.com/100x180">
    <img src="http://via.placeholder.com/100x200">
</div>

css：

div {
   columns: 100px auto;
}

提琴：https://jsfiddle.net/x6bdft9u/

https://developer.mozilla.org/en-US/docs/Web/CSS/columns

我在回答时重复了，对不起