Collapse divs垂直CSS

时间:2016-02-29 12:50:53

标签: html css

我正在网站上工作,我有这段代码

.container {
  width: 100%;
  margin:0 auto;
}

.container div {
  width: 25%;
  display: inline-block;
  vertical-align:top;
  background: lightblue;
  border: 1px solid black
}
<div class="container">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nisi, sit eius provident, vitae, quisquam impedit dolore ad aperiam incidunt optio consequuntur aliquam facilis hic ullam! Quisquam tempora, fuga numquam.</p>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quod, ipsa quidem natus quis quam odit molestiae sit, debitis amet expedita fugiat nesciunt at modi eos, porro laborum quas optio.</p>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, necessitatibus alias atque nulla praesentium dolorem, dignissimos autem culpa placeat quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi.</p>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora labore optio placeat aperiam facilis recusandae velit, minus modi quo dolores molestias in ratione officia accusantium, reiciendis porro, ipsam, repellendus atque!</p>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quisquam ratione ducimus temporibus rerum, voluptatum facilis repellat quos nostrum commodi adipisci hic libero, rem optio consequatur tempora sed sequi voluptas!</p>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolor nobis veritatis deserunt voluptate illum, voluptatibus consequuntur optio autem sint, accusamus ipsam, quidem nesciunt doloribus similique doloremque magni dolorem. Animi.</p>
  </div>
</div>

我希望我的div像这张图片一样垂直折叠: enter image description here

我尝试添加float: left;,但它不起作用。 谢谢你的帮助!

2 个答案:

答案 0 :(得分:1)

flex属性添加到.container类。

.container {
  width: 100%;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
}

答案 1 :(得分:0)

当你不想使用flexbox时,用几行html + css实现并不容易。 我怀疑你应该尝试这个插件: http://masonry.desandro.com/