Question

我有4个统一大小的块div 1x1,2x1,1x2,2x2。我需要这些来从上到下填充页面上的空间。到目前为止，我让他们只是向左浮动，并在那里得到我70％左右，但我需要这样，如果下一个1x1大小div的1x1空间移动到该空间，如果是3x1空间移动2x1 div和1x1 div等。

当前状态：https://jsfiddle.net/grk7bdub/5/

＆＃13;

.box {
  float: left;
  /*display: inline-block;*/
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: solid;
  border-color: white;
  padding: 5px;
}

.box1x1 {
  height: 200px;
  width: 200px;
  color: white;
  background-color: red;
}

.box2x1 {
  height: 200px;
  width: 400px;
  color: white;
  background-color: blue;
}

.box2x2 {
  height: 400px;
  width: 400px;
  color: white;
  background-color: green;
}

.box1x2 {
  height: 400px;
  width: 200px;
  color: white;
  background-color: orange;
}

＆＃13;

<div class="box box1x1">hello</div>
<div class="box box1x1">hello</div>
<div class="box box1x1">hello</div>
<div class="box box2x2">sup</div>
<div class="box box1x1">hello</div>
<div class="box box1x2">hello</div>
<div class="box box1x1">hello</div>
<div class="box box2x1">hi</div>
<div class="box box2x2">sup</div>

＆＃13;

没什么特别的。我如何拥有它以便DIV可以自由移动以填充空间（如果存在），DIV不需要以严格的最终顺序结束但是如果可以指定一般的起始顺序那么“伟大” 。

统一设置大小的div移动到

0 个答案: