html - float 元素留有空隙(由于高度不同)

This question already has answers here:

CSS: Floating multiple elements with different heights on multiple rows?
                                
                                    （6个答案）
                                
                        
                                3年前关闭。
            
                    
我正在创建一个响应式网页。

这就是我想要做的。 jsfiddle

#container {
  max-width:500px;
  width:100%;
  color: #fff;
}
#one {
  width:300px;
  height:200px;
  background:#66BCD9;
  float:left;
}
#two {
  width:200px;
  height:50px;
  background:#A1A6E6;
  overflow: hidden;
}
#three {
  width:200px;
  height:50px;
  background:#E3A1E6;
  overflow: hidden;
}
#four {
  width:300px;
  height:100px;
  background:#ED5894;
  float:left;
}
#five {
  width:200px;
  height:300px;
  background:#368736;
  overflow: hidden;
}
#six {
  width:300px;
  height:300px;
  background:grey;
  overflow:hidden
}

<div id="container">
  <div id="one">#one</div>
  <div id="two">#two</div>
  <div id="three">#three</div>
  <div id="four">#four</div>
  <div id="five">#five</div>
  <div id="six">#six</div>
</div>

在桌面视图中，我希望＃6触及#four的底部。

当您减小屏幕尺寸（移动视图）时，div的排列顺序正确。

如何在桌面视图中使＃6触及＃4的底部？

最佳答案

溢出属性指定是在其块级容器溢出时是剪辑内容，渲染滚动条还是仅显示内容。
    / *内容被裁剪，没有滚动条* /
    溢出：隐藏；

关于html - float 元素留有空隙(由于高度不同)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40801496/