浮动div垂直对齐的列？

Question

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

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

例如，如果浏览器的高度仅下降到div 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，就没有问题。

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中运行-moz-column-width:120px; （新提琴）

浮动div垂直对齐的列？

问题描述

1 个解决方案

解决方案1
4 已采纳 2013-04-22 20:27:42

浮动div垂直对齐的列？

问题描述

1 个解决方案

解决方案1 4 已采纳 2013-04-22 20:27:42

解决方案1
4 已采纳 2013-04-22 20:27:42