CSS/HTML 布局 div 以適應固定高度的 div

Question

我是 CSS 的新手，我正在嘗試創造一些不尋常的東西。

我的代碼：

<body>
<div style="background-color:#C1C1C1; height:100%;">
    <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div1
    </div>
    <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div2
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div3
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div4
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div5
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div6
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div7
    </div>
</div>
</body>

假設屏幕高度為 250 像素 -> 主 div 高度也將是 250 像素。

結果：

div1
div2
div3
...

我知道設置 float:left; 會像這樣顯示它們

div1 div2 div3 div4 div5 ....

我想得到：

div1 div3 div5 div7
div2 div4 div6

它就像水平畫廊。 另外，當有更多的 div 時，是否可以使主 div 的寬度可變並添加一個 x-scrollbar？

這應該僅適用於 Internet Explorer 7 及更高版本。 此外，JavaScript 是一個選項。

提前致謝！

Answer 1

使用 CSS3，您想要實現的目標非常簡單： http://jsfiddle.net/Ykkyg/

該小提琴為其提供了標准的 CSS，並為 Webkit（Safari、Chrome）和 Gecko（Firefox）提供了特定於引擎的屬性。

但是，這種方法存在幾個問題：

首先， IE 不支持。
其次，如果該列集變得比瀏覽器 window 高，您將強制用戶上下滾動以僅閱讀一段連續的文本。 這很糟糕。

如果沒有 CSS3，您可以通過先驗地仔細調整所有元素的大小來實現此效果，但這無法擴展，而且恐怕我知道沒有通用解決方案可以解決不涉及一些不重要的 javascript 的問題。

CSS/HTML 布局 div 以適應固定高度的 div

問題描述

1 個解決方案

解決方案1
1 已采納 2011-08-11 16:59:23

CSS/HTML 布局 div 以適應固定高度的 div

問題描述

1 個解決方案

解決方案1 1 已采納 2011-08-11 16:59:23

解決方案1
1 已采納 2011-08-11 16:59:23