は、4つの等しいのdivに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>

tried- 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

フレキシボックス方法：ここ

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;  
} 

とはSCSSや雨どいで、より高度な方法です。もちろん、あなたはさらにそれが最後の行のゼロマージンを追加しても、そこからミックスインを作る絞り込むことができます：

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; 
}