css - 缩放html页面时的滚动条

Question

关于 css 的菜鸟问题

我有几个 div

在一个页面中。现在，当我放大该页面 Div 3(当前向左浮动)时不再适合，因此它正好位于 Div 2 下方。如何更改整个页面的此行为，以便在放大时出现滚动条？我尝试在CSS中设置overflow-x:scroll整个主体，但它似乎没有任何效果。

我为此制作了一个 JSFiddle:http://jsfiddle.net/Lq3Hv/

html

<div class="first">div1</div>
<div class="second">div2</div>
<div class="third">div3</div>
<div class="fourth">div4</div>

CSS

.first {
    background-color:red;
    width: 400px;
}
.second {
    background-color:blue;
    width: 200px;
    float:left;
}
.third {
    background-color:green;
    width: 200px;
    float:left;
}
.fourth {
    clear:both;
    background-color:yellow;
    width: 400px;
}

尝试放大浏览器，您将看到 div3 位于 div2 之下。 (无论如何，在 Chrome 中)。我通常希望使用同时适用于 IE8 + 和 Chrome 的解决方案。

谢谢。

Answer 1

您需要做的就是添加一个包装 div 并为其指定总宽度。

<强> Working Fiddle

HTML

<div class="wrap">
<div class="first">div1</div>
<div class="second">div2</div>
<div class="third">div3</div>
<div class="fourth">div4</div>
</div>

CSS

.wrap {
    width:400px;
}