css multi-column, который заполняется в строке

Question

У меня многострочный макет, который работает очень хорошо. Макет публикует, скажем, фотографии, в формате плит. Тем не менее, я хочу, чтобы он был опубликован на основе времени. Я могу сделать это в своем запросе, чтобы вытащить данные на основе последнего измененного времени. Но список упорядочен по столбцу1, а затем по столбцу2 и т. Д.

A1 | B1 | C1 | D1 

A2 | B2 | C2 | D2 

A3 | B3 | C3 | D3 

Но я хочу, чтобы это выглядело как

A1 | A2 | A3 | B1 

B2 | B3 | C1 | C2 

C3 | D1 | D2 | D3 

и так далее. Как я могу получить этот эффект строки для нескольких столбцов? Если я не использую несколько столбцов, я могу получить этот эффект, но тогда он не реагирует на меньшие экраны. Есть ли более простой способ заставить многостолбец вести себя так, как я хочу, или я должен обрабатывать его отдельно для каждого размера устройства?

Answer 1

Да, вы могли бы достичь этого очень легко, используя макет CSS float: left вместо столбцов. Вот пример того, что она будет выглядеть так:

.flex-c { 
 
    display: block; 
 
    height: 450px; 
 
    width: auto; 
 
} 
 

 
.flex-i { 
 
    height: 100px; 
 
    width: 100px; 
 
    float:left; 
 
    background: gray; 
 
    margin: 0 10px 10px 0; 
 
}

<div class="flex-c"> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
     <div class="flex-i"></div> 
 
    </div>

Этот метод работает на всех современных браузерах и полностью мобильной среды.