html - 垂直折叠div 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像此图像一样垂直折叠：


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

最佳答案

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

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