根据动态内容使得div具有相同的高度而无需javascript

时间:2017-08-09 17:20:42

标签: html css

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

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

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

我已经创建了一个JavaScript解决方案,对于启用了javascript的浏览器来说效果很好。您可以查看here,代码如下。但是我希望有一个非JavaScript解决方案,这可能吗?我无法创建浮动div s以获得相同的高度,其中高度应该跟随图像高度最大的高度。

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;
    }
  }
}
&#13;
* {
  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 */
}
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

这里是一个没有Javascript的例子,使用flexboxes进行布局。我还没看过媒体查询。

&#13;
&#13;
@echo off
setlocal EnableDelayedExpansion
for /f "tokens=3-5 delims== " %%A in ('wmic os get Caption /value ^| find "Windows" ') do (
    set "winVer=%%A %%B %%C"
    )
echo !winVer!
set "numbers="
for /F "delims=:" %%a in ('findstr /I /N /C:"!winVer!" serials.txt') do (
   set /A after=%%a+1
   set "numbers=!numbers!!after!: "
    )
for /F "tokens=1* delims=:" %%a in ('findstr /N "^" serials.txt ^| findstr /B "%numbers%"') do (
    echo %%b 
    )

endlocal
goto :eof
&#13;
* {
  box-sizing: border-box;
}

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

.product-img-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-img-wrapper img {
  width: 100%;
}

.product-wrapper {
  min-width: calc(20% - 20px);
  max-width: calc(20% - 20px);
  margin: 10px;
  /* 5 products in a row */
  border: 1px solid #DDD;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.product-title {
  width: 100%;
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 10px;
  align-self: flex-end;
}

@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 */
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您可以使用 flexbox

我们可以在display: flex上为flex-wrap: wrap设置#container作为初学者,然后像您已经完成的那样设置每个.product-wrapper的宽度。这样可以同时调整产品包装的大小。

然后,我们还可以为每个display: flex使用.product-wrapper,并为每个.product-img-wrapper再次使用display: flex来处理每个产品包装中的内容。

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

基本上,在子级上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 -->
<div className="optimise-page">
<Row>
    <Col sm={7} >
        <div className="optimise-panel">
            {this.props.children}
        </div>
    </Col>

    <Col sm={5}>
        <div className="preview-panel">
            <JobPostingControl jobDescription={jobPosting.data} isLoading={search.previewRequestState.isBusy || previewByTemplate.isBusy} />
        </div>
    </Col>
</Row>