float属性的问题

Question

我的div-s有一个小问题，你可以看到

<div class="bigbig">

<div class="small">

</div>
<div class="big">

</div>
<div class="small">

</div>

</div>

.bigbig {
  width: 400px;
  height: 400px;
  border: solid red;
}

.small {
  width: calc(100% / 2);
  height: calc(100% /2);
  float: left;
  border: solid blue;
  box-sizing: border-box;
}

.big{
  width: calc(100% / 2);
  height: 100%;
  float:left;
  border: solid green;
  box-sizing: border-box;
}

https://jsfiddle.net/jump3r/776rp8ne

如何在第一个div下浮动第三个div。

由于

Answer 1

代码正常工作，因为它会将每个新div保持浮动到左侧，如果某些东西阻塞它，它将转到一个新行。

您需要做的是将.big div向右浮动。这将它从左浮动div的流程中取出，它将很好地排列在您想要的左侧：

.big{
  width: calc(100% / 2);
  height: 100%;
  float:right;
  border: solid green;
  box-sizing: border-box;
}

在工作代码段中查看：

.bigbig {
  width: 400px;
  height: 400px;
  border: solid red;
}

.small {
  width: calc(100% / 2);
  height: calc(100% /2);
  float: left;
  border: solid blue;
  box-sizing: border-box;
}

.big{
  width: calc(100% / 2);
  height: 100%;
  float:right;
  border: solid green;
  box-sizing: border-box;
}

<div class="bigbig">

<div class="small">
</div>
<div class="big">
</div>

<div class="small">
</div>

</div>

Answer 2

将div与big类一起浮动。像这样......

<div class="bigbig">

<div class="small">

</div>
<div class="big" style="float:right;">

</div>
<div class="small">

</div>

</div>

Answer 3

只需将.big更改为右侧

即可

使用float:left;上的.big将占据第二个.small位置，即使没有合适的空间

   .big{
  width: calc(100% / 2);
  height: 100%;
  float:right;
  border: solid green;
  box-sizing: border-box;
}