放大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 之下。（无论如何都是铬）。我通常想使用在 IE8+ 和 chrome 中都适用的解决方案。

谢谢。

Answer 1

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

工作小提琴

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;
}