浮動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