浮动左元素不堆栈

我有一些浮动元素的问题。我想，当你调整浏览器窗口箱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

我尝试了明确的财产，但没有任何帮助。

来源

2013-07-25 Julez

你想要什么 –

这是要求的行为。 – YD1m

当你在小提琴上调整结果窗口的大小时，你会发现方框3正在方框2下方，但我想要在方框1下方，以便它下面没有间隙 – Julez

你只能用js来做这个动态布局。例如使用masonry插件。

来源

2013-07-25 11:57:13 YD1m

Okey ...是的，我知道这个插件，但我想知道是否只有CSS。但如果没有其他方式我使用该插件。谢谢。 – Julez

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

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

有很多材料在那里这个话题，所以我只是维基百科的链接以供参考。

来源

2013-07-25 11:53:15 pcalcao

我想要的是，当有2个元素的地方时，盒子3正好在盒子1下面彼此相邻。 – Julez

这是预期的CSS行为。如果调整浏览器窗口，而你有拨弄开，框下框1.如果你想框3在任何时候都显得那样的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是您所需的空间。如果你的盒子的内容将被改变很多，我会建议不要使用这个。

来源

2013-07-25 12:00:04 Nekkoru

是的，但我有一个动态页面，所以这些框的内容可以是不同的每次这样margin-top：-70px;可能会在稍后的点margin-top：-120px; – Julez

@ user1502014不幸的是，你无能为力。 JS中可能有办法解决这个问题，但请记住，有这样一个事情，即努力工作以重新发明轮子。最简单的解决方案是设计一个更好的布局，预计动态内容更改。 – Nekkoru

浮动左元素不堆栈

回答

相关问题