屏幕分辨率問題

編碼我的索引頁後出現此問題。我劃分了頁面分成兩列：屏幕分辨率問題

header 

nav 

content floating left, content floating right 

footer

在我的屏幕分辨率我有它正確對齊：

Content left | Content right

但是在小屏幕上，它看起來像這樣：

Content left 
     Content right

這是代碼：

<div id="contentleft"> 
    text & content left 
    </div> 
    <div id="contentright"> 
    text & content right 
    </div>

CSS：

#contentleft { 
    float:left; 
    margin-left:12%;} 

#contentright { 
    float:right; 
    margin-right:12%;}

幫助將是巨大的appriciated

來源

2011-09-08 Vaz

當它們不存在足夠的空間時，浮動將會環繞。你的CSS的寬度設置爲自動擴展到內容。

#contentleft { 
    float:left; 
    margin-left:12%; 
    width:38%; // note margins grow the width of divides 
} 

#contentright { 
    float:right; 
    margin-right:12%; 
    width:37%; // note on odd width screen some browsers IE rounds up so 100%/2 + 100%/2 = 101% according to microsoft. 
}

來源

2011-09-08 18:40:37 Wayne

謝謝男人！這得到了我只想要的效果，現在contentleft被放置在一個帶有水平滾動條的框架中......這發生在小分辨率屏幕上。感謝大家的幫助！ – Vaz

不要忘記文件默認的css保證金！如果你不打包分隔默認的邊緣是8個像素的屏幕分裂100％寬度分割... * {padding：0px; margin：0px} ...我似乎總是在第一次編碼時錯過這個。 – Wayne

感謝您的回覆，但這已經是mt css文檔:) – Vaz

添加width到您的div並把它放在％像50％-50％。

來源

2011-09-08 18:33:04 kaps

50％+ 12％+ 50％+ 12％> 100％，不要忘記那些利潤率。 –

防止重疊的一種方法是將div s都放入#wrapper div中，並給#wrapper設置一組width。

#wrapper{ 
    width:400px; 

} 
#contentleft { 
    float:left; 
    width:120px; 
    margin-left:12%; 
    background:green; 
} 

#contentright { 
    float:left; 
    width:120px; 
    margin-left:12%; 
    background:red; 
}

例子：http://jsfiddle.net/jasongennaro/b2eyx/1/

據透露...我也飄來他們左，改變了margin S和添加了一些顏色，使其更容易看到。

歡迎來到SO！

來源

2011-09-08 18:35:25

感謝您的快速回答！我會檢查它是否有效，並讓你知道;） – Vaz

屏幕分辨率問題

回答

相關問題