Question

我有一个＆＃34;容器＆＃34; div将停靠在页面的左侧，并且始终是从顶部，左侧和底部10px。里面的div将是10个小＆＃34;内部＆＃34; divs，垂直排列。容器应该总是足够宽以容纳所有内部div。

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

例如，如果浏览器的高度仅下降到div 7，那么它应该如下所示......

这是我到目前为止所获得的事情......

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，没问题。

Answer 1

如果您只是浏览器要求是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中使用

浮动垂直对齐的div就像列一样？

1 个答案: