Question

<style>
.holder{
width:3in; 
height:4in; 
background:aqua;

}
.orangeBox{
float:left;
background:orange;
width:1in;
height:1.5in;
}
.yellowBox{
float:left;
background:yellow;
width:1in;
height:1in;
}
</style>
<div class="holder">
<div class="orangeBox">R</div>
<div class="yellowBox">1</div>
<div class="yellowBox">2</div>
<div class="yellowBox">3</div>
<div class="yellowBox">4</div>
<div class="yellowBox">5</div>
<div class="yellowBox">6</div>
<div class="yellowBox">7</div>
<div class="yellowBox">8</div>
<div class="yellowBox">9</div>
<div class="yellowBox">10</div>
<div class="yellowBox">11</div>
</div>

我想要实现的是让各个盒子向左浮动（他们正在做）但也要保持在同一条线上。在这里的示例中，我希望框5不显示在框R下，而是自动换行到下一个完整的行。

我知道这可以通过浮动来实现：对，但这会扭转所有数字，使一切都倒退。

https://jsfiddle.net/o4eem3za/

Answer 1

您可以清除第6个元素后的所有其他元素：

Updated Example

.yellowBox:nth-child(2n + 6) {
    clear: left;
}

或者，根据所需的结果，您也可以清除第6个元素：

Updated Example

.yellowBox:nth-child(6) {
    clear: left;
}

Answer 2

你不应该让两个盒子的橙色和黄色都相同吗？

现在你有橙色盒子1.5英寸和黄色盒子1英寸高度。同时为黄色框设置1.5，它将解决您的问题。

.yellowBox{
   float:left;
   background:yellow;
   width:1in;
   height:1.5in; /* changed this from 1in to 1.5in */
}

小提琴：ways to fan-out and have multiple sinks

Answer 3

如果您正在寻找具有不同行的网格图案，我建议使用display：table和display：table-cell。（编辑：丢弃显示：表格的东西，如果你漂浮R右 - 不必要）

<style>
.holder{
width:3in; 
height:4in; 
background:aqua;

}
.orangeBox{
float:right;
background:orange;
width:1in;
height:1.5in;

margin-bottom:.5in;
}
.yellowBox{
float:left;
background:yellow;
width:1in;
height:1in;

}
</style>
<div class="holder">
<div class="orangeBox">R</div>
<div class="yellowBox">1</div>
<div class="yellowBox">2</div>
<div class="yellowBox">3</div>
<div class="yellowBox">4</div>
<div class="yellowBox">5</div>
<div class="yellowBox">6</div>
<div class="yellowBox">7</div>
<div class="yellowBox">8</div>
<div class="yellowBox">9</div>
<div class="yellowBox">10</div>
<div class="yellowBox">11</div>
</div>

编辑：这仍然使用浮点数，但它利用了表格单元格的特殊显示属性。将.holder的宽度更改为4，您将看到它的功能正如您所期望的那样。

编辑v2：将orangeBox更改为向右浮动，向底部添加.5边距，删除显示：表格内容（如果每张海报的评论浮动则不必要）

Answer 4

使用display：inline-block，你可以实现它

https://jsfiddle.net/o4eem3za/4/

 display:inline-block

保持浮动左侧div在同一条线上

4 个答案: