float排列元素如何高度不一致的元素上下紧贴呢？

Question

demo在这https://jsfiddle.net/4ue9omLf/
横向排列时如果元素高度不同，让上下两个元素间紧密贴合，该怎么实现呢？

Answer 1

看一下瀑布流具体方法，也可以看一下这篇文章的八、解决高度塌陷问题：http://www.zhangxinxu.com/wor...

Answer 2

CSS没有很好的解决方案。使用JavaScript的话，参照瀑布流布局的算法，计算上一列元素的高度，根据这个高度来设置绝对定位的位置。

Answer 3

这种基本是用JS判断再动态设置postion:absolute;来实现的，百度一下响应式插件一大堆
当然如果你总共就这么4个写死div，您给第三个div直接设置margin-top:-30px;就完事了，不过我想不会存在这种奇葩的需求。

Answer 4

题主的方法不行，那么，flex呢？也是不行的，不行看连接：http://runjs.cn/code/yzqp80jk。
这个效果，很像瀑布流。说一个思路。用两个div，分别是id=column1和id=column2，用js把子元素插入到column1和column2中比较短的那个，所以每次appendChild前，要计算一下column1和column2的高度。当然了，column1和column2是横排并列的两列。

Answer 5

这种的话 只能脱离文档流了。但是你如果想用在瀑布流的话，可以按竖列排

Answer 6

瀑布流间距贴紧的话，分开写，大盒子里面左右两列分别浮动左右，左边里面一个个放项目，右边里面一个个放项目,画图是这样的

html和css大概是这样,细节根据自己需要补充

<div class="box">
  <div class="left">
     <div class="item">
       <img class="img" src="">
     </div>
 <div class="item">
       <img class="img" src="">
     </div>
<div class="item">
       <img class="img" src="">
     </div>
  </div>
  <div class="right">
     <div class="item">
       <img class="img" src="">
     </div>
 <div class="item">
       <img class="img" src="">
     </div>
  </div>
<div class="item">
       <img class="img" src="">
     </div>
</div>

<style>
.box {overflow:hidden};
.left {float:left};
.right {float:right};
.left,.right {width: calc(50% - 10px)}
.item {width:100%}
.img {width:100%;height:auto}
</style>