DIV, чтобы прокручивать горизонтально, а не вертикально - Pure CSS Approach

Question

Я уже много раз слышал об этом. Данные решения были:

• white-space: nowrap;
• display: inline-block;

Но мое дело обстоит иначе. Это точный вывод, что я пытаюсь достичь:

Я не уверен, если есть что-то, что я могу сделать, чтобы заполнить так, что-то вроде сверху вниз до нижнего правого пути , Я планирую чистое решение CSS, но я не мог получить. Я смог получить только традиционный левый-правый до нужного пути! :(

Мой код до сих пор было так:

* {font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0;} 
 
body {font-size: 80%;} 
 

 
ul, ul li {line-height: 1;} 
 
ul li {cursor: pointer; text-align: center; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;} 
 
ul li span {display: none;} 
 
ul li:hover span {display: inline;} 
 

 

 
#grid {width: 80%; margin: 15px auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap;} 
 
#grid li {list-style: none; width: 75px; height: 75px; background-color: #0c9; display: inline-block; margin: 5px; flex: auto; line-height: 75px; font-weight: 600;} 
 
#grid li.selected {background-color: #096;} 
 
#grid li.unavailable {background-color: #633; color: #fff;} 
 
#grid li.unavailable span, 
 
#grid li.selected span {display: inline;}

<h3>For just three.</h3> 
 
<ul class="border-outside" id="grid"> 
 
    <li id="g1"><span>G1</span></li> 
 
    <li id="g2"><span>G2</span></li> 
 
    <li id="g3"><span>G3</span></li> 
 
</ul> 
 
<h3>For filling a complete row.</h3> 
 
<ul class="border-outside" id="grid"> 
 
    <li id="g1"><span>G1</span></li> 
 
    <li id="g2"><span>G2</span></li> 
 
    <li id="g3"><span>G3</span></li> 
 
    <li id="g4"><span>G4</span></li> 
 
    <li id="g5"><span>G5</span></li> 
 
    <li id="g6"><span>G6</span></li> 
 
</ul> 
 
<h3>For More...</h3> 
 
<ul class="border-outside" id="grid"> 
 
    <li id="g1"><span>G1</span></li> 
 
    <li id="g2"><span>G2</span></li> 
 
    <li id="g3"><span>G3</span></li> 
 
    <li id="g4"><span>G4</span></li> 
 
    <li id="g5"><span>G5</span></li> 
 
    <li id="g6"><span>G6</span></li> 
 
    <li id="g7"><span>G7</span></li> 
 
    <li id="g8"><span>G8</span></li> 
 
    <li id="g9"><span>G9</span></li> 
 
    <li id="g10"><span>G10</span></li> 
 
    <li id="g11"><span>G11</span></li> 
 
    <li id="g12"><span>G12</span></li> 
 
</ul>

Это увеличивает высоту мудр, но не вширь. Кроме того, я не могу использовать white-space: nowrap, потому что это не заполняет по высоте вообще! Любая помощь в этом вопросе? Заранее спасибо.

Answer 1

Таким образом, столбцы CSS предоставят вам довольно близкое к решению, которое вы ищете, однако я немного изменил бы ваш html, чтобы сделать так, чтобы они обменивались друг с другом немного лучше. Причина, по которой вы получаете случайную проблему, когда «четные» столбцы справа вверху связаны с высотой контейнера (.box), не являясь идеальным делимым числом высоты его внутренних элементов .. я бы либо посмотрел при использовании некоторых js для создания пользовательской полосы прокрутки для этих областей (это перестанет быть частью макета) или исправьте высоту контейнера до высоты, которая не вызывает эту проблему (проблема может быть реплицирована путем изменения .box высота от 205px до 200px)

HTML

<div class="box"> 
    <div class="item"> 
    <div class="item-inner">1</div> 
    </div> 
    <div class="item"> 
    <div class="item-inner">2</div> 
    </div> 
    <div class="item"> 
    <div class="item-inner">3</div> 
    </div> 
    <div class="item"> 
    <div class="item-inner">4</div> 
    </div> 
    <div class="item"> 
    <div class="item-inner">5</div> 
    </div> 
    <div class="item"> 
    <div class="item-inner">6</div> 
    </div> 
    <div class="item"> 
    <div class="item-inner">7</div> 
    </div> 
    <div class="item"> 
    <div class="item-inner">8</div> 
    </div> 
    <div class="item"> 
    <div class="item-inner">9</div> 
    </div> 
    <div class="item"> 
    <div class="item-inner">10</div> 
    </div> 
</div> 

CSS

.box, 
.box li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.box { 
    display:inline-block; 
    border: 1px solid #ccc; 
    overflow: auto; 
    -webkit-column-width: 35px; 
    -moz-column-width: 35px; 
      column-width: 35px; 
    -webkit-column-gap: 0; 
    -moz-column-gap: 0; 
      column-gap: 0; 
    height: 205px; 
} 
.box .item { 
    display: block; 
    padding: 5px; 
    width: 35px; 
    height: 35px; 
} 
.box .item .item-inner{ 
    background-color: #ccc; 
    position: relative; 
    height:100%; 
    width:100%; 
} 

JSBIN