Question

我正在处理如下所示的html代码，在该代码中，我想从上至下从左到右对齐多列元素。

<ul class="list-tomorrow-page">
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
</ul>

@media (min-width: 767px) {
.list-tomorrow-page {
    column-count: 2;
    column-gap: 6rem;
}
}

@media (min-width: 767px)
.article-tomorrow-page {
    height: 475px;
    list-style: none;
    display: inline-block;
}

上面的html代码以以下方式显示o / p：

item1  item5

item2  item6

item3  item7

item4

问题陈述：

我想知道我应该在上面的CSS代码中做些什么，以便它以以下方式显示项目列表：

item1    item2
item3    item4
item5    item6
item7

我复制了here的答案，但是没有用。

<style>
  ul {list-style: none;}
  li {float: left;}
  li:nth-child(2n+1) {clear: left;} /* 1st of every twos */
</style>

Answer 1

简单的选择是将flex与flex-wrap结合使用：

.list-tomorrow-page {
  display:flex; 
  flex-wrap:wrap;
}

.article-tomorrow-page {
  width:50%;
}

<ul class="list-tomorrow-page">
   <li class="article-tomorrow-page">1</li>
   <li class="article-tomorrow-page">2</li>
   <li class="article-tomorrow-page">3</li>
   <li class="article-tomorrow-page">4</li>
   <li class="article-tomorrow-page">5</li>
   <li class="article-tomorrow-page">6</li>
   <li class="article-tomorrow-page">7</li>
</ul>

如何在CSS中自顶向下之前从左向右流动多列元素？

1 个答案: