Question

我有超过3个子节点和一个父div。我想将div对齐成砖块。但div没有正确定位。孩子在两个div之间消耗底部不需要的空间。

每个孩子div都有不同的高度，因此display: flex属性在父级中无效。还尝试使用父div中的column-count属性，但它在chrome中无法正常工作。

请参阅Demo

＆＃13;

.container {
  border: 1px black solid;
  overflow: hidden;
  vertical-align: top;
}

.small {
  float: left;
  width: 100px;
  border: 1px black solid;
  background: aliceblue;
}

＆＃13;

<div class="container">
  <div class="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</div>
  <div class="small">It has survived not only five centuries.</div>
  <div class="small">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
  <div class="small">more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</div>
  <div class="small">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical.</div>
  <div class="small">Latin literature from 45 BC, making it over 2000 years old.</div>
  <div class="small">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</div>
</div>

＆＃13;

Answer 1

您可以使用CSS-Masonry布局。请看这个链接：http://w3bits.com/css-masonry/

Answer 2

试试这个应该有效

.container{
  border: 1px black solid;  
  overflow: hidden;  
  vertical-align: top;
  display:flex;
}

.small{
  float: left;
  width: 100px;
  border: 1px black solid;
  background: aliceblue;
  align-self: center;
}

http://jsfiddle.net/8g9cycs8/

Answer 3

请使用弹性盒，它可以很容易地解决问题。

.Container {
    display: flex;
    justify-content: flex-start;
}

垂直对齐不起作用

3 个答案: