滾動條在HTML頁面

Question

還挺noob問題變焦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; 
} 

嘗試在瀏覽器中放大，你會看到下DIV2是DIV3下降。 （無論如何鉻）。 我一般都想使用在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; 
}