2014-05-23 82 views
1

我得到了兩個div,我將它左右浮動。即使當您調整瀏覽器的大小時,浮動兩個div彼此

<div style="float:left">1</div> 
<div style="float:right">1</div> 
<div style="clear:both">1</div> 

所以一切工作正常,我這樣做多年來這樣。 現在我編碼一個RESONSIVE-DESIGN,所以我不能使用固定寬度。 問題是:如果屏幕越來越少,正確的div位於下方的左邊。我不想要這個。

我知道我可以做固定寬度來克服這個問題,或者把它們都放在一個包裝中來克服這個問題,但是正如我所說 - 我無法使用固定寬度的工作。

我如何處理倒閉,這兩個div的是對方並沒有下文或東西的旁邊(改變屏幕尺寸小的時候)的響應

即時通訊新的,但我得到的所有wokr - 這就是我的最後一個問題我過去一直使用固定大小的值。

+0

看'媒體查詢'。 –

+1

當我第一次開始使用響應時,開始使用像[Bootstrap](http://getbootstrap.com/)這樣的現有框架非常有用 - 它包括考慮響應式佈局的網格框架,並且有很多示例在行動中。 媒體查詢是一種CSS條件語法,可讓您根據屏幕寬度等條件添加自定義樣式;有效地爲您提供了一種方式來爲不同的屏幕尺寸設置不同的方式。 – ArleyM

回答

0

您可以在一定程度上達到此目的。

HTML標記

<div id="main"> 
    <div id="one"></div> 
    <div id="two"></div> 
</div> 

CSS

#main{ 
    height:200px; 
    width:100%; 

} 
#one{ 
    width:50%; 
    background-color:#cccccc; 
    height:100%; 
    float:left; 
} 
#two{ 
    width:50%; 
    background-color:#ccffff; 
    height:100%; 
    float:left; 
} 

FIDDLE

以及更好的辦法是使用CSS media queries 使用媒體查詢也可以指定特定的屏幕分辨率,這將永遠是加分要達到響應式設計

+1

「媒體查詢」更新 - http://jsfiddle.net/2ag8W/1/(如果視口小於480像素) –

+0

請記住,CSS非常強大:http://jsfiddle.net/dqj57/ – Timmetje

相關問題