2

I'm trying surround a large box by smaller ones. All using css alone. and here is the fiddle - http://jsfiddle.net/7nya3/4/ There are couple of issues: There is an empty white block on bottom-left. last box in second row doesn't align properly.

Any handle to fix it ?

<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>
4

3 回答 3

3

问题是，当您浮动框时，一旦将大框添加到行中，下一个框就会移到它的右侧或下方。

解决方法是将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;
}
于 2013-11-07T22:20:41.363 回答
1

在没有一些客户端脚本的情况下解决这个问题并不容易——如果不是几乎不可能的话。在考虑对象的浮动顺序和模式时，有一种自然的方式可以让事情就位。如果我没有足够雄辩地传达这一点，请原谅我，但请参阅此参考：

在此处输入图像描述

答：在 A 点，我已经扩展了黄色块以显示它超出了相邻绿色块的长度。

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

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

D：在 D 点，我们在第三行结束后的下一行物理上开始了最后一行。第四行永远不会在那个空白区域开始。

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

于 2013-11-07T22:53:04.903 回答
1

Cosmin SD 是正确的，但是你确实错过了一个小盒子，所以添加它会导致它低于，所以向新盒子添加另一个类，然后将它定位margin-top到适当的位置，然后增加大盒子的宽度和高度以向右对齐和底部的小盒子。

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

于 2013-11-07T22:29:17.210 回答