我是 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>
假设屏幕高度为 250px -> 主 div 高度也将是 250px。
结果:
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 也是一个选项。
提前致谢!
最佳答案
使用 CSS3 可以很容易地实现您想要实现的目标:http://jsfiddle.net/Ykkyg/
那个 fiddle 为其提供了标准的 CSS，以及 Webkit(Safari、Chrome)和 Gecko(Firefox)的引擎特定属性。
不过这种方法有几个问题:
- 首先，IE doesn't support it .
- 其次，如果该列集比浏览器窗口高，您将迫使用户上下滚动以阅读一段连续的文本。这很糟糕。
如果没有 CSS3，您可以通过先验地仔细调整所有元素的大小来实现这种效果，但这不会缩放，恐怕我不知道没有通用的解决方案来解决这个问题不涉及一些重要的 javascript。
关于CSS/HTML 布局 div 以适应固定高度的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7029717/