Question

我遇到一些浮动元素的问题。我想要的是当您调整浏览器窗口的大小时，框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;
}

请参阅小提琴：Fiddle

我尝试使用clear属性，但没有任何帮助。

Answer 1

您只能使用js执行此动态布局。例如，使用masonry插件。

Answer 2

如果要在调整浏览器大小并控制某些维度时控制布局，则应该查看媒体查询。

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

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

Answer 3

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

.clear{
  clear: left;
}

您会注意到方框3将出现在正确的位置，但稍低一点，就在方框2的下边框下方。因为所有的框都是浮动的，所以它们被CSS处理，好像它们在一条线上一样，该线与最高的.box一样高。当您引入一个.clear ed的框时，它将显示在该行下方。您可以使用margin-top调整排名，例如将第3栏的<div>元素更改为：

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

希望这会有所帮助。

编辑：哦，还有：如果你想要在没有空间同时显示所有三个盒子的情况下动态添加它，请计算出三个盒子在一条线上需要多少空间，然后使用媒体查询，如下所示：

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

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

浮动左元素不叠加

3 个答案: