2

我有一个“容器” div，它将停靠在页面的左侧，并且始终距离顶部、左侧和底部 10px。在那个 div 里面会有 10 个小的“内部”div，它们是垂直排列的。容器应始终足够宽以容纳所有内部 div。

事情是这样的......每当容器 div 不能将所有内部 div 保存在单个列中时（例如当用户降低浏览器高度时），我希望内部 div 扩展到一个新的“列”（但仍然留在容器 div 内）。换句话说，容器 div 将根据需要水平扩展，因此不会出现垂直滚动条。

例如，如果浏览器的高度只下降到 div 7，那么它应该看起来像这样......

1      8
2      9
3      10
4
5
6
7

这是我到目前为止所拥有的 jsFiddle ......

http://jsfiddle.net/ymESU/

这是代码...

<!DOCTYPE html>
<html>

<head>

<style>
    #container {position: absolute; top: 10px; left: 10px; bottom: 10px; border: 1px solid black; padding: 5px; } 
    .innerBoxes {display: block; width: 100px; height: 100px; background: red; margin: 5px; padding: 10px; color: white;}
</style>

</head>

<body>

<div id="container">
  <div class='innerBoxes'>1</div>
  <div class='innerBoxes'>2</div>
  <div class='innerBoxes'>3</div>
  <div class='innerBoxes'>4</div>
  <div class='innerBoxes'>5</div>
  <div class='innerBoxes'>6</div>
  <div class='innerBoxes'>7</div>
  <div class='innerBoxes'>8</div>
  <div class='innerBoxes'>9</div>
  <div class='innerBoxes'>10</div>
</div>

</body>
</html>

我缺少什么来实现这一点？

仅供参考-对于这个特定的项目，它只需要在现代版本的 Chrome 上工作，所以如果最好的解决方案需要 CSS3，没问题。

4

1 回答 1

4

如果您的浏览器要求只有 Chrome，那么您可以继续使用 CSS3 列。使用内联块而不是浮点数：

#container {position: absolute; 
    top: 10px; left: 10px; bottom: 10px; 
    border: 1px solid black; padding: 5px; 
   -webkit-column-width:120px; -moz-column-width:120px;
  } 
.innerBoxes {
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background: red; 
    margin: 5px; 
    padding: 10px; 
    color: white;
}

它在这里工作：http: //jsfiddle.net/GHMb8/2/

如果添加-moz-column-width:120px;（新小提琴） ，更新也适用于 Firefox

于 2013-04-22T20:27:42.343 回答