我一直试图这样做一段时间,并没有一个适合我的解决方案。我从不同高度的数据库中获取图像,我需要将它们垂直对齐到中间,并在每个图像的末尾水平对齐标题。
请注意,所有图像都以不同的方式切割,我无法改变,所以不会因为它们看起来不对齐而无关紧要。
更新:数字标题(跨度)也可能有不同的高度。
Here's what i need to accomplish
真的会感谢一些帮助。
<section class="new-products container">
<div class="image-row">
<!--PRODUCT BLOCK-->
<div class="product-block col-lg-4 col-md-4 col-xs-12">
<figure>
<img src="https://s21.postimg.org/wr1wb9z0n/test2.jpg" class="img-responsive" alt="Foto Producto">
<figcaption>
<span class="category">category</span>
<span class="product-name">Product Name</span>
<span span="" class="price">price 6€</span>
</figcaption>
</figure>
</div>
<!--PRODUCT BLOCK END-->
<!--PRODUCT BLOCK-->
<div class="product-block col-lg-4 col-md-4 col-xs-12">
<figure>
<img src="https://s21.postimg.org/z9nlbykqv/test1.jpg" class="img-responsive" alt="Foto Producto">
<figcaption>
<span class="category">category</span>
<span class="product-name">Product Name</span>
<span span="" class="price">price 6€</span>
</figcaption>
</figure>
</div>
<!--PRODUCT BLOCK END-->
<!--PRODUCT BLOCK-->
<div class="product-block col-lg-4 col-md-4 col-xs-12">
<figure>
<img src="https://s21.postimg.org/h84ge5qpz/test3.jpg" class="img-responsive" alt="Foto Producto">
<figcaption>
<span class="category">category</span>
<span class="product-name">Product Name</span>
<span span="" class="price">price 6€</span>
</figcaption>
</figure>
</div>
<!--PRODUCT BLOCK END-->
</div>
.image-row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
-webkit-box-align: baseline;
-moz-box-align: baseline;
}
.new-products {
text-align: center;
}
.product-block .category, .product-block .category-special {
font-size: .75em;
font-weight: 600;
}
.product-block {
margin: 0 0 2em;
}
.product-block span {
display: block;
}
.product-block .category, .product-block .category-special {
font-size: 1em;
font-weight: 600;
letter-spacing: .063em;
text-transform: uppercase;
}
.product-block .category {
color: #b10832;
}
答案 0 :(得分:1)
将每个图像包裹在div中,即
<div class="image-holder">
<img src="https://s21.postimg.org/wr1wb9z0n/test2.jpg" class="img-responsive" alt="Foto Producto">
</div>
并使用match height js plugin(http://brm.io/jquery-match-height/)对这些div应用相等的高度。然后
.image-holder {
float: left;
width: 100%;
vertical-align: middle;
}
.image-holder img {
vertical-align: bottom;
display: inline-block;
width: auto;
max-width: 100%;
height: auto;
}
.image-holder:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -.25em;
}
答案 1 :(得分:1)
所以我对你的代码进行了以下操作:
删除baseline
image-row
对齐方式
将figure
列设为flexbox
列并应用这些样式:
.product-block figure {
display: flex;
flex-direction: column;
height: 100%;
}
.product-block figure img {
border: 1px solid red;
margin-top:auto;
}
.product-block figure figcaption {
margin-top:auto;
}
还在图像周围添加了边框以供说明。请告诉我您对此的反馈,谢谢!
演示如下:
.image-row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
-webkit-box-align: baseline;
-moz-box-align: baseline;
*/
}
.new-products {
text-align: center;
}
.product-block .category,
.product-block .category-special {
font-size: .75em;
font-weight: 600;
}
.product-block {
margin: 0 0 2em;
}
.product-block span {
display: block;
}
.product-block .category,
.product-block .category-special {
font-size: 1em;
font-weight: 600;
letter-spacing: .063em;
text-transform: uppercase;
}
.product-block .category {
color: #b10832;
}
.product-block figure {
display: flex;
flex-direction: column;
height: 100%;
}
.product-block figure img {
border: 1px solid red;
margin-top:auto;
}
.product-block figure figcaption {
margin-top:auto;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<section class="new-products container">
<div class="image-row">
<!--PRODUCT BLOCK-->
<div class="product-block col-lg-4 col-md-4 col-xs-12">
<figure>
<img src="https://s21.postimg.org/wr1wb9z0n/test2.jpg" class="img-responsive" alt="Foto Producto">
<figcaption>
<span class="category">category</span>
<span class="product-name">Product Name</span>
<span span="" class="price">price 6€</span>
</figcaption>
</figure>
</div>
<!--PRODUCT BLOCK END-->
<!--PRODUCT BLOCK-->
<div class="product-block col-lg-4 col-md-4 col-xs-12">
<figure>
<img src="https://s21.postimg.org/z9nlbykqv/test1.jpg" class="img-responsive" alt="Foto Producto">
<figcaption>
<span class="category">category</span>
<span class="product-name">Product Name</span>
<span span="" class="price">price 6€</span>
</figcaption>
</figure>
</div>
<!--PRODUCT BLOCK END-->
<!--PRODUCT BLOCK-->
<div class="product-block col-lg-4 col-md-4 col-xs-12">
<figure>
<img src="https://s21.postimg.org/h84ge5qpz/test3.jpg" class="img-responsive" alt="Foto Producto">
<figcaption>
<span class="category">category</span>
<span class="product-name">Product Name</span>
<span span="" class="price">price 6€</span>
</figcaption>
</figure>
</div>
<!--PRODUCT BLOCK END-->
</div>
</div>
&#13;