放大html页面时滚动条

Question

有点关于css的noob问题

我有几个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。 （无论如何都是镀铬）。 我通常希望使用在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;
}