html - 不用javascript根据动态内容制作等高的div

Question

对于产品页面，我需要显示一些产品(一张图片加上图片下方的标题)。许多产品将显示在一行中，后续产品将显示在下一行中。一行中的图像数量取决于屏幕尺寸(响应式)。

每个产品行的标题应在页面的相同高度上垂直对齐。此外，一行中的图像应在该行图像的垂直中心垂直对齐。

产品图片将在稍后的体育场从 CMS (WordPress) 加载，因此宽高比会有所不同。

我已经创建了一个完美运行的 JavaScript 解决方案……适用于启用了 javascript 的浏览器。可以查一下here代码如下。但我想要一个非 JavaScript 解决方案，这可能吗？我在创建具有相同高度的 float div 时遇到问题，其中高度应遵循具有最大高度的图像的高度。

P.S.:图像尺寸也应该是响应式的，即图像宽度应该是包含 div 的百分比。

JavaScript 代码:

resize_products();
window.addEventListener('resize', function() {
  resize_products();
}, true);

function resize_products() {
  var img_padding = 10; //SET EQUAL TO MARGIN

  //resize images
  var img_wrapper_dv = document.getElementsByClassName("product-img-wrapper");
  if (img_wrapper_dv.length > 0) {
    var div_width = img_wrapper_dv[0].offsetWidth;
    var ratio = [];
    ratio[0] = 3 / 2; // width /  height
    ratio[1] = 2 / 3;
    ratio[2] = 1;
    ratio[3] = 4 / 3;
    ratio[4] = 3 / 4;
    ratio[5] = 1;
    ratio[6] = 3 / 2;
    ratio[7] = 2 / 3;
    ratio[8] = 1;

    var max_height = 0;
    for (var i = 0; i < ratio.length; i++) {
      var img = document.getElementById("product-img" + i);
      var img_width = div_width * Math.sqrt(2 / 3 * ratio[i]) - 2 * img_padding;
      img.style.width = img_width;
      var img_height = img_width / ratio[i];
      if (img_height > max_height) max_height = img_height;
    }
    for (var i = 0; i < img_wrapper_dv.length; i++) {
      img_wrapper_dv[i].style.height = max_height + 2 * img_padding;
    }
  }
}

* {
  box-sizing: border-box;
}

.product-img {
  height: auto;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
}

.product-wrapper {
  position: relative;
  margin: 10px;
  width: calc(20% - 20px);
  /* 5 products in a row */
  border: 1px solid #DDD;
  float: left;
}

.product-title {
  display: block;
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 10px;
}

@media screen and (max-width: 1200px) {
  .product-wrapper {
    width: calc(25% - 20px);
  }
  /* 4 products in a row */
}

@media screen and (max-width: 1000px) {
  .product-wrapper {
    width: calc(33.33333% - 20px);
  }
  /* 3 products in a row */
}

@media screen and (max-width: 800px) {
  .product-wrapper {
    width: calc(50% - 20px);
  }
  /* 2 products in a row */
}

@media screen and (max-width: 600px) {
  .product-wrapper {
    width: calc(100% - 20px);
  }
  /* 1 product in a row */
}

<div id="container">
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img0" src="http://via.placeholder.com/300x200" class="product-img" />
    </div>
    <div class="product-title">
      Titel img0
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img1" src="http://via.placeholder.com/200x300" class="product-img" />
    </div>
    <div class="product-title">
      Titel img1
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img2" src="http://via.placeholder.com/300x300" class="product-img" />
    </div>
    <div class="product-title">
      Titel img2
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img3" src="http://via.placeholder.com/400x300" class="product-img" />
    </div>
    <div class="product-title">
      Titel img3
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img4" src="http://via.placeholder.com/300x400" class="product-img" />
    </div>
    <div class="product-title">
      Titel img4
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img5" src="http://via.placeholder.com/300x300" class="product-img" />
    </div>
    <div class="product-title">
      Titel img5
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img6" src="http://via.placeholder.com/300x200" class="product-img" />
    </div>
    <div class="product-title">
      Titel img6
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img7" src="http://via.placeholder.com/200x300" class="product-img" />
    </div>
    <div class="product-title">
      Titel img7
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img8" src="http://via.placeholder.com/300x300" class="product-img" />
    </div>
    <div class="product-title">
      Titel img8
    </div>
  </div>
</div>

Answer 1

您可以使用 flexbox 为此。

我们可以设置display: flex与 flex-wrap: wrap在 #container对于初学者，然后设置每个 .product-wrapper 的宽度正如您已经完成的那样。这将负责按行调整产品包装的大小。

那我们也可以用display: flex对于每个 .product-wrapper再次为每个 .product-img-wrapper照顾每个产品包装内的居中内容。

我们在这里利用的功能是 flexbox 的自动边距。

基本上，display: flex在 parent 身上 margin: auto on a child 会自动将该子元素在父元素中垂直和水平居中。或者，您可以通过在另一侧使用自动边距将 child 对齐到一侧或另一侧。例如，为了将我们的标题与 parent 的底部对齐，我们使用 margin-top: auto .但是因为我们也希望它们水平居中，所以我们最终得到 margin: auto auto 0 auto。 .

* {
  box-sizing: border-box;
}

#container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.product-wrapper {
  display: flex;
  flex-direction: column;
  margin: 10px;
  border: 1px solid #DDD;
  width: calc(20% - 20px);
}

.product-img-wrapper {
  /*display: flex;*/
  padding: 10px;
  margin: auto;
}

.product-img-wrapper img {
  /*margin: auto;*/
  width: 100%;
  height: auto;
}

.product-title {
  display: block;
  text-align: center;
  font-family: Arial, sans-serif;
  margin: auto auto 0 auto;
}

@media screen and (max-width: 1200px) {
  .product-wrapper {
    width: calc(25% - 20px);
  }
  /* 4 products in a row */
}

@media screen and (max-width: 1000px) {
  .product-wrapper {
    width: calc(33.33333% - 20px);
  }
  /* 3 products in a row */
}

@media screen and (max-width: 800px) {
  .product-wrapper {
    width: calc(50% - 20px);
  }
  /* 2 products in a row */
}

@media screen and (max-width: 600px) {
  .product-wrapper {
    width: calc(100% - 20px);
  }
  /* 1 product in a row */
}

<div id="container">
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img0" src="http://via.placeholder.com/80x60" class="product-img" />
    </div>
    <div class="product-title">
      Titel img0
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img1" src="http://via.placeholder.com/2000x3000" class="product-img" />
    </div>
    <div class="product-title">
      Titel img1
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img2" src="http://via.placeholder.com/300x300" class="product-img" />
    </div>
    <div class="product-title">
      Titel img2
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img3" src="http://via.placeholder.com/400x300" class="product-img" />
    </div>
    <div class="product-title">
      Titel img3
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img4" src="http://via.placeholder.com/300x400" class="product-img" />
    </div>
    <div class="product-title">
      Titel img4
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img5" src="http://via.placeholder.com/300x300" class="product-img" />
    </div>
    <div class="product-title">
      Titel img5
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img6" src="http://via.placeholder.com/300x200" class="product-img" />
    </div>
    <div class="product-title">
      Titel img6
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img7" src="http://via.placeholder.com/200x300" class="product-img" />
    </div>
    <div class="product-title">
      Titel img7
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img-wrapper">
      <img id="product-img8" src="http://via.placeholder.com/300x300" class="product-img" />
    </div>
    <div class="product-title">
      Titel img8
    </div>
  </div>
</div>
<!-- container -->