1

我对一些浮动元素有疑问。我想要的是当您调整浏览器窗口的大小时，框 3 就在框 1 下方

HTML：

<div class="box">
    <p>box 1</p>
    <p>box 1</p>
    <p>box 1</p>
</div>
<div class="box">
     <p>box 2</p>
    <p>box 2</p>
    <p>box 2</p>
    <p>box 2</p>
    <p>box 2</p>
</div>
<div class="box">
     <p>box 3</p>
    <p>box 3</p>
    <p>box 3</p>
</div>

CSS：

.box {
    width:80px;
    float:left;
    border:1px solid slateGrey;
    margin:0 0 0 10px;
    padding:10px;
}

见小提琴：小提琴

我尝试了一些具有 clear 属性的东西，但没有任何帮助。

4

3 回答 3

3

您只能使用 js 进行此动态布局。例如砌体插件。

于 2013-07-25T11:57:13.663 回答
0

如果您想在调整浏览器大小并达到特定尺寸时控制布局，您可能应该查看媒体查询。

http://en.wikipedia.org/wiki/Media_queries

关于这个主题有很多材料，所以我只是链接维基百科以供参考。

于 2013-07-25T11:53:15.553 回答
0

这是预期的 CSS 行为。如果在打开小提琴的同时调整浏览器窗口的大小，框 3 会出现在框 1 下。如果您希望框 3 始终像这样出现，则需要添加类似此类的内容.clear：

.clear{
  clear: left;
}

您会注意到框 3 将出现在正确的位置，但稍微低一点，就在框 2 的底部边框下方。因为所有的盒子都是浮动的，所以 CSS 会将它们视为在一条线上，这条线与最高的 一样高.box。当您引入一个已.clear编辑的框时，它将出现在该行下方。您可以使用 调整位置margin-top，例如将<div>框 3 的元素更改为：

<div class="box clear" style="margin-top: -70px;">

希望这有帮助。

编辑：哦，另外：如果您希望在没有空间并排显示所有三个框时动态添加它，请计算出三个框在一行上需要多少空间，然后使用媒体查询，像这样：

@media all and (max-width: 500px){
    .box.clear{
      clear: left;
      margin-top: -70px;
    }
  }

500px 是您所需的空间。如果您的盒子的内容会发生很大变化，我建议您不要使用它。

于 2013-07-25T12:00:04.960 回答