浮动div的行为像一个明确的：左侧应用

我遇到浮动div的问题。在寻找答案时，大多数问题是如何实现我所得到的效果，而不是如何实现我想要的效果。基本上我是浮动的divs创建3列和期望的结果是第四个div，它应该在第一列正下方的第一个div中，开始于第三个浮动div以高度结束而不是直接在其上方的位置，第一个div，结束。下面的代码显示了我不想要的内容。浮动div的行为像一个明确的：左侧应用

我得到的效果就像我期望的那样清晰：left;如果适用于第四个浮动div，则表现良好。

下面的代码仅适用于3 * 400px小于屏幕宽度但4 * 400大于屏幕宽度的分辨率。

此图像显示发生了什么，我想第四格在那里我已经证明，而不是它是用一个箭头：http://img687.imageshack.us/img687/2613/desired.png

<html> 
    <head> 
     <style> 
     .div1 
     { 
      float: left; 
      background-color: black; 
      height: 100px; 
      width: 400px; 
     } 
     .div2 
     { 
      background-color: red; 
      height: 200px; 
      width: 400px; 
      float: left; 
     } 
     .div3 
     { 
      float: left; 
      background-color: blue; 
      height: 500px; 
      width: 400px; 
     } 
     .div4 
     { 
      background-color: green; 
      float: left; 
      height: 100px; 
      width: 400px; 
     } 
    </style> 
</head> 
<body> 

    <div class="div1"></div> 
    <div class="div2"></div> 
    <div class="div3"></div> 
    <div class="div4"></div> 

</body> 
</html>

来源

2012-05-17 Jay Croghan

从W3：

的外上方的浮动框的高度可能不会高于源文档中之前的元素生成的任何块或浮动框的外部顶部。

您可能感兴趣的jQuery masonry plugin。

来源

2012-05-17 20:51:53 j08691

对于这个问题完美的资源！ –

如果你能够改变HTML稍微那么你可以组DIV1和DIV4在一起：

<html> 
    <head> 
     <style> 
     .group1 { 
      float: left; 
     } 
     .div1 
     { 
      float: left; 
      background-color: black; 
      height: 100px; 
      width: 400px; 
     } 
     .div2 
     { 
      background-color: red; 
      height: 200px; 
      width: 400px; 
      float: left; 
     } 
     .div3 
     { 
      float: left; 
      background-color: blue; 
      height: 500px; 
      width: 400px; 
     } 
     .div4 
     { 
      clear: both; 
      background-color: green; 
      height: 100px; 
      width: 400px; 
     } 
    </style> 
</head> 
<body> 

    <div class="group1"> 
     <div class="div1"></div> 
     <div class="div4"></div> 
    </div> 
    <div class="div2"></div> 
    <div class="div3"></div> 


</body> 
</html>

来源

2012-05-17 21:47:31

就像我在上下文中提到的那样简单，我的问题涉及到一组高度动态的div和高度，感谢您的帮助。 –

浮动div的行为像一个明确的：左侧应用

回答

相关问题