CSS/HTML 布局 div 适合固定高度 div
我是 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滚动条？
这应该仅适用于 Internet Explorer 7 及更高版本。此外，JavaScript 也是一种选择。
提前致谢！
I am new to CSS and I am trying to create something unusual.
My code:
<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>
let's say screen is 250px height -> the main div height will be 250px too then.
Result:
div1
div2
div3
...
I know that setting float:left; will display them like
div1 div2 div3 div4 div5 ....
I would like to get:
div1 div3 div5 div7
div2 div4 div6
It's like horizontal gallery.
Also, when there would be more divs, is it possible to make main div's width variable and add an x-scrollbar?
This is supposed to work on Internet Explorer 7 and higher only. Also, JavaScript is an option.
Thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用 CSS3 想要实现的目标非常简单： http://jsfiddle.net/Ykkyg/
fiddle 为其提供了标准 CSS，以及 Webkit（Safari、Chrome）和 Gecko（Firefox）的引擎特定属性。
不过，这种方法存在一些问题：
如果没有CSS3，您可以通过先验地仔细调整所有元素的大小来实现这种效果，但这无法扩展，而且恐怕我知道没有通用的解决方案来解决这个问题，而不涉及一些不平凡的 JavaScript。
What you're trying to achieve is quite easy with CSS3: http://jsfiddle.net/Ykkyg/
That fiddle provides the standard CSS for it, and the engine-specific properties for Webkit (Safari, Chrome) and Gecko (Firefox).
There's a couple of problems with this approach though:
Without CSS3, you can achieve this effect by carefully sizing all elements a priori, but that doesn't scale, and I'm afraid I know of no generic solution to the problem that doesn't involve some non-trivial javascript.