你如何使一组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;}

有没有办法让社交媒体块扩展到其所包含的div的整个高度。显然，当你调整窗口大小时，它会随容器缩小或增加。

这是我正在寻找的一个例子

Answer 1

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

我updated your code to use flex box - 您需要在占据垂直空间时移除网格清晰元素。

我添加的唯一css是display:flex;flex-wrap:wrap;到您的容器元素。 （香港专业教育学院添加了一个背景颜色，并在小提琴中强制一个div高度作为例子）

Answer 2

您可以使用flexbox，查看此示例（与您类似）：

<强> HTML：

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

<强> CSS：

.social-grid {
  width: 80%;
  height: 300px;
  background: grey;
  //FLEX!
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
}

.social-item {
  width: 26%; //more than 1/4
  height: 130px;
  background: green;
}