Question

我想创建一个可滚动的容器，其内容按列布局。我发现我不能将column-count属性与overflow-y: auto一起使用，并且在同一元素上使用固定大小。内容总是水平溢出，比我在column-count中指定的列数更多。

HTML：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>   
</ul>

<ul class="with-columns">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>  
</ul>

CSS：

li {
  list-style-type: none;
  padding: 5px;
  background: coral;
  margin: 2px;
  width: 80%;
  display: inline-block;
  height: 60px;
}

li:nth-child(2n+3) {
  height: 90px; /* simulate variable height content  items */
}

ul {
  background: lightblue;
  position: relative;
  width: 300px;
  height: 300px;
  overflow-y: auto;
}

ul.with-columns {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-count: 2;
  column-gap: 0;
}

如何将ul.with-columns垂直滚动而不将其包装在其他元素中？

JSBin：http://jsbin.com/gegawidayi/4/edit

Answer 1

我认为您可能想要做的是设置max-height而不是ul。

上的高度

cOntentRpl = dOllar & lRepl

这可以为您提供您正在寻找的东西。

具有列和溢出的可滚动容器：y：auto

1 个答案: