DIV水平滚动而不是垂直滚动 - 纯CSS方法

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）不同，它不是内部元素高度的完美可分数。我要么用一些j来给自己一个这些区域的自定义滚动条（这将阻止它成为布局的一部分），或将容器的高度固定到不会导致此问题的高度（可以通过更改.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