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>

假设屏幕高度为250px - ＆gt;主div高度也将是250px。

结果：

div1
div2
div3
...

我知道设置float：left;会像

一样显示它们

div1 div2 div3 div4 div5 ....

我想得到：

div1 div3 div5 div7
div2 div4 div6

就像水平画廊。此外，当有更多div时，是否可以使主div的宽度变量并添加x滚动条？

这应该仅适用于Internet Explorer 7及更高版本。此外，JavaScript是一种选择。

提前致谢！

Answer 1

使用CSS3：http://jsfiddle.net/Ykkyg/

，您想要实现的目标非常简单

这个小提琴为它提供了标准的CSS，以及Webkit（Safari，Chrome）和Gecko（Firefox）的引擎特定属性。

但这种方法存在一些问题：

首先，IE doesn't support it。
其次，如果该列集比浏览器窗口高，那么您将强制用户上下滚动以仅读取一段连续的文本。这很糟糕。

如果没有CSS3，可以通过先验地仔细调整所有元素的大小来实现这种效果，但这不能扩展，我担心我不知道没有通用的解决方案涉及一些非平凡的JavaScript。

CSS / HTML布局div适合固定高度的div

1 个答案: