2016-12-09 5 views
0

내 사이트의 소셜 미디어 아이콘 그리드를 만들고 싶습니다. 제대로 스타일을 고민하고 있습니다. div의 그룹을 포함하는 div를 채우는 방법

내가 현재 가지고있는 것입니다 :

enter image description here

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 %를 차지하기 위해 요소를 말할 수

enter image description here

답변

1

인 flexbox 무엇을 찾고 있어요의 예입니다.

저는 updated your code to use flex box입니다. 그리드 클리어 요소는 수직 공간을 차지하므로 제거해야합니다.

내가 추가 한 CSS는 컨테이너 요소에 display:flex;flex-wrap:wrap;입니다. (필자는 배경 색상을 추가하고 예를 제공하기 위해 바이올린에 사업부 높이를 강제)

+0

는 CSS3 표준하거나 CSS 플렉스입니까? 또한 구형 브라우저와 호환됩니까? – bLAZYY

+0

http://caniuse.com/#feat=flexbox에서 정보를 제공해야합니다. 그것은 css3의 일부입니다 – hairmot

+0

디스플레이를 추가 할 때 : flex, flex-wrap : wrap; 컨테이너 div에 모든 것이 축소됩니다. [다음] 같은 (https://gyazo.com/3e2f8b749cd61e2e9d099858a751ca05) – bLAZYY

0

당신은 (당신과 유사)이 예를 확인, 인 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; 
}