响应电网，高度相等

-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

响应电网，高度相等

回答

相关问题