html - 如何让一组 div 填充包含的 div

Question

我正在尝试为我的网站制作一个社交媒体图标网格，但我很难正确设置它的样式。

这是我目前拥有的:

HTML:

<div class="masonry-grid-item social-grid">

    <div class="masonry-grid-item w33">
        <i class="icon-facebook" style="font-size:36px;color: #fff;"></i>
    </div>

    <div class="masonry-grid-item w33">
        <i class="icon-twitter" style="font-size:36px;color: #fff;"></i>
    </div>

    <div class="masonry-grid-item w33 w33-last">
        <i class="icon-instagram" style="font-size:36px;color: #fff;"></i>
    </div>

    <div class="grid-clear"></div>

    <div class="masonry-grid-item w33 w33-bot">
        <i class="icon-instagram" style="font-size:36px;color: #fff;"></i>
    </div>

    <div class="masonry-grid-item w33 w33-bot">
        <i class="icon-instagram" style="font-size:36px;color: #fff;"></i>
    </div>

    <div class="masonry-grid-item w33 w33-bot w33-last">
        <i class="icon-instagram" style="font-size:36px;color: #fff;"></i>
    </div>

    <div class="grid-clear"></div>

</div>

CSS:

.masonry-grid{margin: 3px;position:relative;}
.masonry-grid-item{width:25%;padding:3px; float: left;}
.masonry-grid-item a{display:block;position:relative;}
.masonry-grid-item a:before{width:100%;height:100%;display:block;content:"";position:absolute;visibility:hidden;opacity:0;filter:alpha(opacity=0);background-color:#000;transition:0.3s all;}
.masonry-grid-item a:hover:before{visibility:visible;opacity:0.2;filter:alpha(opacity=20);}
.masonry-grid-item.w2{width:50%;}
.masonry-grid-item.w3{width:75%;}
.masonry-grid-item.w4{width:100%;}
.masonry-grid img{width:100%;}
.grid-clear {clear:both; width:100%;} 
.w33{width: 31.73%; background: #818990; display: block; padding: 12.2% 0; margin: 0 2.4% 2.4% 0;}
.w33-last{margin-right: 0px;}
.w33-bot{margin-bottom: 0px;}
.wwd {text-align: left; padding: 20px;}
.masonry-grid-item .heading-container { background: rgba(0, 0, 0, 0.70) none repeat scroll 0 0; bottom: 5%; left: 0; position: absolute; width: 100%; width: 70%; text-align: left; padding: 20px 0 20px 20px;}
.masonry-grid-item h1 { color: #fff; margin: 0; padding: 0;}
.masonry-grid-item h2 {display: block; width: 100%; background: #44ac6d; padding: 10px 20px; color: #fff;}

有什么方法可以使社交媒体 block 扩展到其包含的 div 的整个高度。显然，当您调整窗口大小时，它会随容器缩小或增大。

这是我正在寻找的示例

Answer 1

flexbox 允许您告诉您的元素占据 100% 的垂直空间。

我已经 updated your code to use flex box - 您需要删除网格清晰元素，因为它们会占用垂直空间。

我添加的唯一 CSS 是 display:flex;flex-wrap:wrap; 到您的容器元素。 (我添加了背景颜色并在 fiddle 中强制设置了一个 div 高度来举个例子)