html - 根据动态内容制作等高的div，无需javascript

标签 html css

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

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

产品图片将从稍后体育场的 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>

最佳答案

您可以使用flexbox 为此。

首先，我们可以在#container上设置display: flex和flex-wrap:wrap，然后设置每个的宽度>.product-wrapper 正如您已经完成的那样。这将负责沿行均匀调整产品包装的大小。

然后我们还可以对每个 .product-wrapper 使用 display: flex ，然后对每个 .product-img-wrapper 再次使用小心将每个产品包装内的东西居中。

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

基本上，父元素上的 display: flex 和子元素上的 margin: auto 会自动将该子元素在父元素中垂直和水平居中。或者，您可以通过使用另一侧的自动边距将子项对齐到一侧或另一侧。例如，为了将我们的标题与其父级的底部对齐，我们使用 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 -->

关于html - 根据动态内容制作等高的div，无需javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45596980/

上一篇：html - 重叠的盒子

下一篇：python - 使用 Python 编写的谷歌图像抓取器与网络浏览器之间的不同 html 代码结果(UI)

相关文章：

html - CSS3 过滤器不适用于 Opera、Internet Explorer、Mozilla Firefox

在 Parcel 构建期间在 HTML 文件中调用时不会触发 JavaScript 函数

javascript - 如何在允许格式化的 JavaScript 编辑器中处理清理

html - CSS 输入类型选择器 - 可能有 "or"或 "not"语法？

javascript - 在 select onchange 上更改样式并停止返回到原始样式

javascript - 如何在模态 Bootstrap 中添加容器和图像

css - IE 9 css 定位问题

javascript - JS。非标准覆盖表

html - 木炭/模拟像使用 CSS3 的边框效果

css - 如何使用 d3.js 为 rect 应用 "background: repeating-linear-gradient"样式

©2024 IT工具网  联系我们