把一个 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>

但是所有 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;     
}

还有一种更高级的方法，使用 scss 和 gutters。显然，您可以进一步完善它，为最后一行添加零边距，并从中进行混合：

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

把一个 div 分成四个相等的 div

split a div into four equal div

css

centering