如何以正确的方式浮动或内联阻止

Question

一个内部有四个或更多div的容器就像一个完美的拼图排列，最后一个div填充剩余的高度..

图像说明了它应该是什么样子

我在哪里：http://jsfiddle.net/meb9h3vx/

.wrap {
  float: left;
  background: #fff;
  width: 100%;
}

.get2 {
  float: left;
  height: auto;
  width: 50%;
}

<div class="wrap">
  <div class="get2">
    <h1>1</h1>
    abc
  </div>
  <div class="get2">
    <h1>2</h1> 
  </div>
  <div class="get2">
    <h1>3</h1>
    d
    <br>e
  </div>
  <div class="get2">
    <h1>4</h1> 
  </div>
</div>

Answer 1

尝试使用此 -

1. 从float和.wrap移除.get2
   1. 从text-align: center; css
   中删除body
   2. 将以下css添加到.get2 - text-align: center; display: inline-block; vertical-align: top;
   3. 将margin-left: -4px; css添加到.get2:nth-child(2) { }
   4. 并将margin-left: -4px; margin-top: -17px; css添加到.get2:nth-child(4)

Answer 2

Flexbox救援没有肮脏的黑客：

＆＃13;

＆＃13;

body {
    background:#000;
    color:#ccc;
    text-align:center;
    margin:10px;
}
.wrap {
    background:#fff;
    width:100%;
    display:flex;
    flex-wrap: wrap;
    height:auto;
}
.get2 {
    height:auto;
    width:50%;
}
.get2:nth-child(1) {
    background:red;
}
.get2:nth-child(2) {
    background:green;
}
.get2:nth-child(3) {
    background:yellow;
}
.get2:nth-child(4) {
    background:blue;
}

＆＃13;

<div class="wrap">
  <div class="get2">
    <h1>1</h1>
    abc
  </div>
  <div class="get2">
    <h1>2</h1>

  </div>
  <div class="get2">
    <h1>3</h1>
    d
    <br>e</div>
  <div class="get2">
    <h1>4</h1>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

嘿，你可以尝试给我min-height，因为我在下面给出

    .get2{
    float:left;
    height:auto;
    width:50%;
    min-height:120px
}

Answer 4

修正了它！所以我内联阻止div和nth-child（2n）margin-left：-4px去掉white-space和vertical-align：top然后我添加的最后一部分：padding-bottom：99999px; margin-bottom：-99999px; http://jsfiddle.net/p428b71y/1/

.wrap{
float:left;
background:#fff;
width:100%;
 overflow:hidden;
}
.get2:nth-child(2n){
margin-left:-4px;
}
.get2{
  vertical-align:top;
    display:inline-block;
    height:auto;
    width:50%;
    padding-bottom: 99999px;
    margin-bottom: -99999px;
}