html - 垂直折叠 div CSS

Question

我正在做一个网站，我有这段代码

.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 垂直折叠，如下图所示:

我尝试添加一个 float: left; 但它不起作用。感谢您的帮助!

Answer 1

将 flex 属性添加到您的 .container 类。

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