네 개의 동일한 DIV에 사업부를 분할

Question

내가 뭘하고 싶은

------------------------------------ 
| ------------- ------------- | 
| |  1  |  2  | | 
| |   |   | | 
| ------------- ------------- | 
| |  3  |  4  | | 
| |   |   | | 
| --------------------------- | 
------------------------------------ 

지금까지 내가

body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#top { 
 
    width: 100%; 
 
    background-color: red; 
 
    height: 15%; 
 
} 
 
#bottom { 
 
    width: 100%; 
 
    background-color: blue; 
 
    height: 85%; 
 
} 
 
.inner { 
 
    width: 49%; 
 
    height: 49%; 
 
    border: 1px solid black; 
 
    float: left; 
 
}

<div id="top"></div> 
 
<div id="bottom"> 
 
    <div class="inner">1</div> 
 
    <div class="inner">2</div> 
 
    <div class="inner">3</div> 
 
    <div class="inner">4</div> 
 
</div>

점프는 - 시도 follows- 같습니다 그러나 모든 inner 된 div는 왼쪽 정렬. 센터를 수평 방향으로 정렬하려면 bottom div 이내입니까?

Answer 1

box-sizing: border-box;을 사용하고 테두리가 백분율로 계산되므로 50 %를 사용할 수 있습니다.

body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#top { 
 
    width: 100%; 
 
    background-color: red; 
 
    height: 15%; 
 
} 
 
#bottom { 
 
    width: 100%; 
 
    background-color: blue; 
 
    height: 85%; 
 
} 
 
.inner { 
 
    width: 50%; 
 
    height: 50%; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    float: left; 
 
    text-align: center; 
 
    padding: 16px; 
 
}

<div id="top"></div> 
 
<div id="bottom"> 
 
    <div class="inner">1</div> 
 
    <div class="inner">2</div> 
 
    <div class="inner">3</div> 
 
    <div class="inner">4</div> 
 
</div>

Answer 2

인 flexbox 방법 : 여기

https://jsfiddle.net/hfxx1awp/4/

#top{ 
    background-color:red; 
    height:15%; 
} 

#bottom{ 
    display: flex; 
    flex-wrap:wrap; 
    height:85%; 
    background-color:blue; 
} 

#bottom > *{ 
    flex-basis: auto; 
    width:50%; 
    box-sizing:border-box; 
    border:1px solid black;  
} 

그리고는 SCS들과 도랑으로, 더 진보 된 방법입니다. 분명히 당신은 더는 마지막 행에 대한 제로 마진을 추가하고 또한 그것에서 믹스 인을 수정 수 :

https://jsfiddle.net/hfxx1awp/5/

#bottom > *{ 
    $columns: 2; 
    $gutter_width: 15px; 
    $gutters: $columns - 1; 
    $gutter_offset: $gutter_width * $gutters/$columns; 
    width: calc(50% - #{$gutter_offset}); 
    flex-basis: auto; 
    box-sizing:border-box; 
    border:1px solid black; 

    &:nth-child(#{$columns}n){ 
    margin-right: 0; 
    } 

    // apply margin 
    @for $i from 0 through ($gutters){ 
    @if($i != 0){ 
     &:nth-child(#{$columns}n+#{$i}){ 
     margin-right: $gutter_width; 
     } 
    } 
    } 

    margin-bottom: $gutter_width; 
}