如何使div在文本中的高度/寬度響應相同的大小的div與圖像？

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); 

我想用一個假的IMG爲.quote或我不知道如果我應該去jQuery來計算.img格大小並將它們應用於.quote。有沒有其他的CSS方法可以做到這一點？

Answer 1

有2個解決方案：

jQuery的

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

CSS3

FlexBox layout module