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

Question

我已经看到很多关于这个的答案。给出的解决方案是:

• 空白:nowrap;
• 显示:内联 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