내 사이트의 소셜 미디어 아이콘 그리드를 만들고 싶습니다. 제대로 스타일을 고민하고 있습니다. div의 그룹을 포함하는 div를 채우는 방법
이
내가 현재 가지고있는 것입니다 :HTML은 : CSS
<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>
:
.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에 포함 된 div 전체 높이까지 확장 할 수 있습니다. 창 크기를 조정하면 컨테이너가 줄어들거나 늘어납니다. 여기
내가 당신을 수직 공간의 100 %를 차지하기 위해 요소를 말할 수
는 CSS3 표준하거나 CSS 플렉스입니까? 또한 구형 브라우저와 호환됩니까? – bLAZYY
http://caniuse.com/#feat=flexbox에서 정보를 제공해야합니다. 그것은 css3의 일부입니다 – hairmot
디스플레이를 추가 할 때 : flex, flex-wrap : wrap; 컨테이너 div에 모든 것이 축소됩니다. [다음] 같은 (https://gyazo.com/3e2f8b749cd61e2e9d099858a751ca05) – bLAZYY