javascript - CSS 将相似的元素设置为与屏幕上最高的元素相同的高度

Question

我在我的网站上设置了一个产品列表，其中包含图像和描述 <span>如下标记。

但是，无论段落的长度如何，我都希望它们都具有统一的大小。

我可以为它设置一个高度，但是较小的那些都会有一个我不想要的巨大差距，因为我设置了不同的类别，其中一些有很长或很短的描述。

如果我能找到一种方法来根据当时屏幕上最长的高度设置高度，那会很棒，因为至少同一类别中的高度应该足够接近它不会制作的相同长度差别太大了

span{
  border:1px solid black;
  width:110px;
  text-align:center;
  display:inline-block;
  vertical-align:top;
}
p{
  width:90%;
  margin-left:auto;
  margin-right:auto;
}

<span>
<img src="http://via.placeholder.com/100x100">
<p>some text</p>
</span>
<span>
<img src="http://via.placeholder.com/100x100">
<p>a really really really really really really really really really really long bit of text</p>
</span>
<span>
<img src="http://via.placeholder.com/100x100">
<p>some text</p>
</span>

Answer 1

Flexbox会自动为你处理!将所有的 span 放入一个容器中，并设置 display: flex :

span{
  border:1px solid black;
  width:110px;
  text-align:center;
  display:inline-block;
  vertical-align:top;
  margin-right: 5px;
  margin-bottom: 5px;
}
p{
  width:90%;
  margin-left:auto;
  margin-right:auto;
}
.container {
  display: flex;
  flex-wrap: wrap;
}

<div class="container">
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>a really really really really really really really really really really long bit of text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
    <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>a really really really really really really really really really really long bit of text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
    <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>a really really really really really really really really really really long bit of text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
    <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>a really really really really really really really really really really long bit of text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
    <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>a really really really really really really really really really really long bit of text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
</div>