DIV가 수직이 아닌 가로로 스크롤 - 순수 CSS 방식

Question

나는 이것에 관해 많은 답변을 이미 보았다. 주어진 솔루션은 있었다 :

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

하지만 내 경우는 다릅니다.

내가 이런 식으로 기입하기 위해 할 수있는 일이, 오른쪽 아래의 방법으로 하향식 (top-down)과 같이이 있다면 나는 확실하지 않다 : 이것은 내가 달성하기 위해 노력하고있는 무슨의 정확한 출력 . 순수한 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에서 200 픽셀에 높이)

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