对于产品页面,我需要展示一些产品(图像加上图像下方的标题)。许多产品将显示在一行中,后续产品将显示在下一行中。一行中的图像数量取决于屏幕大小(响应)。
标题应垂直对齐于每个产品行的页面相同高度。此外,一行上的图像应垂直对齐在行中图像的垂直中心。
产品图片将在后来的体育场内从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;
答案 0 :(得分:1)
这里是一个没有Javascript的例子,使用flexboxes进行布局。我还没看过媒体查询。
@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;
答案 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>