你如何让一组 div 填充包含 div答案

【问题标题】：How do you make a group of divs fill the containing div你如何让一组 div 填充包含 div
【发布时间】：2016-12-09 11:22:00
【问题描述】：

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

这是我目前拥有的：

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 的全高。显然，当您调整窗口大小时，它会随着容器缩小或增加。

这是我正在寻找的示例

【问题讨论】：

标签： html css grid jquery-masonry

【解决方案1】：

flexbox 可以让你告诉你的元素占据 100% 的垂直空间。

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

我添加的唯一 css 是 display:flex;flex-wrap:wrap; 到您的容器元素。（我添加了背景颜色并在小提琴中强制设置了一个 div 高度来举例）

【讨论】：

flex 是 css3 标准还是只是 css？还兼容旧版浏览器吗？
当我添加 display:flex;flex-wrap:wrap;对于容器 div，它会缩小所有高度。像following
所以我看到你在其中添加了 300px 的高度，我的包含框上没有高度，我不希望有一个，而是它是 Auto 这可能吗？
是的，我只是添加了它，因为如果我没有，我们将有一个空的 div，它不会显示任何内容。在您的代码中，高度将由左侧的元素设置
左边的元素也令人叹为观止，请查看域 dev.waxmanarchitectural.co.uk 以查看我正在处理的页面。正如你所看到的，它的高度都一样。

【解决方案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;
}

【讨论】：