響應電網，高度相等

-2

我怎麼會去實現這一佈局，以快速響應的情況下（即25％的寬度），但每塊具有相同的高度：響應電網，高度相等

_ _ _ _ 
|_|_|_|_| 
|_|___|_| 
|_|_|_|_|

注意中間塊體佔（50寬度的百分比），該中間塊包含文本，但方形圖像是圖像（是方形的，給出其大小）。

我應該使用display: table與display: table-cell和display: table-row混合？或者是有漂亮的CSS技巧。

來源

2014-12-02 Marais Rossouw

你可能要考慮彎曲，一個相當不錯的支持佈局CSS3。 – delCano 2014-12-02 22:48:57

Nah duh，它的CSS3概念。我更多的是尋找更支持瀏覽器的東西。 IE9 +。 – 2014-12-02 22:51:59

對不起。它確實是只有IE9不支持它，但：[http://caniuse.com/#feat=flexbox](http://caniuse.com/#feat=flexbox） – delCano 2014-12-02 23:05:03

Flexbox真的很酷，但我們還沒有100％的支持，所以我還沒有使用它。我可能會檢查出類似www.shelvesgrid.org的內容。然後在框內的圖像上有100％的寬度，如果它們都是完全正方形的，它應該可以工作。

你的結構是這樣的：

<div class="row"> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
</div> 

<div class="row"> 
    <div class="column-3"></div> 
    <div class="column-6"></div> 
    <div class="column-3"></div> 
</div> 
<div class="row"> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
</div>

一個你的CSS是剛剛的img {寬度：100％}

來源

2014-12-03 00:33:35

響應電網，高度相等

回答

相關問題