當滾動條可見時，固定寬度的div中斷佈局

我試圖將具有「紅色」背景並需要100％頁面的垂直堆疊幾個div。在這些div中，我製作了960像素的div。會發生什麼是非常奇怪的：如果我調整我的窗口的大小小於960像素（滾動條出現） - 每個堆疊div的右側存在間隙。您可以查看這裏活生生的例子：http://jsfiddle.net/GLE7A/當滾動條可見時，固定寬度的div中斷佈局

Basic代碼：

<style type="text/css"> 
    * { padding: 0; margin: 0; border: 0; } 
    .wmain { background: red; } 
    .w960 { margin: 0 auto; width: 960px; } 
</style> 

<div class="wmain"> 
    <div class="w960"> 
    test 
    </div> 
</div> 

<div class="wmain"> 
    <div class="w960"> 
    test 
    </div> 
</div>

解決方法非常簡單：只需添加最小寬度：960像素;到.wmain div來解決問題

問題：爲什麼這種奇怪的行爲發生在第一位？固定寬度的孩子是否像絕對定位的div或smth一樣逃脫正常流動？

感謝您的想法

來源

2012-11-04 Marius

因此，當您收到錯誤時，您首先嚐試了什麼？ –

不明白你的問題。 jsfiddle（和這裏）中的代碼無法正常工作並顯示問題。我也提供了這個問題的解決方案，所以我對修復它的方法不感興趣。我需要知道的是爲什麼這個問題首先發生。 – Marius

你的小提琴並不像你描述的那樣。（蘋果瀏覽器）。 – Sparky

發生，因爲你不定義爲wmain的div就是混淆了瀏覽器的任何寬度。

來源

2012-11-04 19:48:11 Christos

我知道，我預計父母會自動擴大到其子的寬度，但我由於某種原因猜測塊模型不能以這種方式工作。 – Marius

當滾動條可見時，固定寬度的div中斷佈局

回答

相關問題