Question

我有一个网格：

<div class="img"><img src="#" /></div>
<div class="img"><img src="#" /></div>
<div class="quote"><p>Lorem ipsum</p></div>
<div class="img"><img src="#" /></div>
<div class="quote"><p>Lorem ipsum</p></div>
<div class="img"><img src="#" /></div>

CSS

div {
   width: 25%;
}

.img {
   display: block;
   max-width: 100%;
   height: auto;
   width: 100%;
}

.quote {
   ?
}

在jQuery中我会这样做：

var imgHeight = $(".img").height();
$(".quote").height(imgHeight);

我想过为.quote使用假img，或者我想知道我是否应该去jQuery来计算.img div大小并将它们应用到.quote。是否还有其他css方法可以做到这一点？

Answer 1

有两种解决方案：

的jQuery

var imgHeight = $(".img").height();
$(".quote").height(imgHeight);

CSS3

FlexBox layout module

如何使高度/宽度的div响应与文本作为div与图像相同的大小？

1 个答案: