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

我有一個網格：如何使div在文本中的高度/寬度響應相同的大小的div與圖像？

<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方法可以做到這一點？

來源

2015-03-19 rob.m

退房flexbox，這很可能就是你的解決方案，如果我正確地理解你的問題。在Flexbox中，您可以通過CSS來判斷div必須與另一個div的高度相同。 – Rvervuurt 2015-03-19 11:55:33

@Rvervuurt真棒，不知道flexbox佈局模塊。謝謝 – 2015-03-19 12:00:31

有2個解決方案：

jQuery的

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

CSS3

FlexBox layout module

來源

2015-03-19 12:02:35

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

回答

相關問題