Question

我正在尝试用较小的盒子包围一个大盒子。全部使用css。这是小提琴 - http://jsfiddle.net/7nya3/4/ 有几个问题：左下方有一个空的白色块。第二行中的最后一个框未正确对齐。

任何修复它的句柄？

<style>
.container {
    width:500px;
    height:500px;
}
.small-box, .large-box {
    width:100px;
    float:left;
    height:100px;
//-moz-box-sizing:border-box;
    border:1px solid white;
    background-color:green;
}

.large-box {
    width:200px;
    //float:left;
    height:200px;
    background-color:orange;
}
</style>
<body>
<div class="container"> 
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="large-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>
    <div class="small-box">x</div>            
    <div class="small-box">x</div>            

</div>
</body>

Answer 1

问题在于，当您将这些框浮动时，只要将大框添加到行中，下一个框就会向右或在其下方。

解决方案是将2个小盒子放在一个特殊的垂直容器中。

    <div class="double-box">
        <div class="small-box">x</div>
        <div class="small-box">x</div>
    </div>

和CSS：

   .double-box{
       width:100px;
       float:left;
       height:200px;  
   }

关于对齐，问题是（正如HaukurHaf所提到的）你没有考虑大盒子下方/上方的两个盒子之间的边距。因此，如果您相应地修改大框（202px）和双框（102）的宽度，则应相应地显示所有内容。

这是小提琴：http://jsfiddle.net/vnsyL/

- 编辑 -

正如评论中所建议的那样，可以使用另一种替代方法而不是更改宽度以适应边距/边框的方法是使用box-sizing css属性和border-box值：

.small-box, .large-box, .double-box {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

Answer 2

Cosmin SD是正确的，但你确实错过了一个小盒子，所以添加它会导致它下面，所以在新盒子中添加另一个类，然后使用margin-top将其定位到位，然后增加大框宽度和高度对齐右下方小框。

http://jsfiddle.net/7nya3/5/

Answer 3

如果没有一些客户端脚本，解决这个问题并不容易 - 如果不是几乎不可能的话。在考虑浮动顺序和物体的模式时，有一种自然的方式可以使物体落到实处。请原谅我，如果我没有充分沟通，请参阅此参考：

enter image description here

答：在A点我延长了黄色区块，显示它超出了相邻绿色区块的长度。

B：在B点，你会看到右边的块在哪里结束。自然浮动位置将立即开始到下一行，并且在与另一个浮点（在本例中为黄色块）碰撞之前可以向左移动。所以在这个例子中，第三行从黄色框的右边开始。它永远不会自然地一直跳到这组块的左侧，因为黄色块是“挡路”。

C：在C点，我们看到第三排块的浮动结束的位置。因为在点C下方没有延伸的块。第三行中的项目永远不会从向下延伸并与浮动项目“碰撞”的项目的左侧开始。

D：在D点，我们在第三行终止后，在最后一行物理地开始下一行。第四行永远不会在空白空间中启动。

我意识到这并不能解决你的问题，但至少有助于（部分）解释浮动的行为。您可能需要集成一些jQuery或其他客户端处理来处理对象的放置。我相信有一些库可以处理你想要的那种浮动行为（比如你在Tumblr和其他类似网站上看到的一些照片风格的博客）。

用CSS中的小盒子围绕一个大盒子

3 个答案: