Question

我想做的事情如下 -

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

到目前为止，我试过 -

＆＃13;

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

＆＃13;

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

＆＃13;

但所有inner div都保持对齐。如何在bottom div中水平对齐中心？

Answer 1

使用box-sizing: border-box;，您可以使用50％，因为边框是按百分比计算的。

＆＃13;

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

＆＃13;

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

＆＃13;

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和排水沟。显然你可以进一步细化它，为最后一行增加零余量，并且还可以用它来混合：

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

2 个答案: