我正在尝试为我的网站制作一个社交媒体图标网格,而我正努力为其设置适当的样式。

这是我目前拥有的:

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

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 - 如何使一组div填充包含的div-LMLPHP

最佳答案

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

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

我添加的唯一CSS是display:flex;flex-wrap:wrap;到您的容器元素。 (我添加了背景色,并在小提琴中强制使用了div高度作为示例)

08-25 13:40
查看更多