Как передать многостолбцовые элементы слева направо, а затем сверху вниз в css? - PullRequest
Новая
       13

Как передать многостолбцовые элементы слева направо, а затем сверху вниз в css?

0 голосов
/ 24 мая 2019

Я работаю над 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

Я скопировал ответ с здесь , но он не сработал. 

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

1 Ответ

1 голос
/ 24 мая 2019

Простой вариант - использовать 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>
...