2012-08-08 121 views
1

所以我知道有很多類似的問題,但我還沒有能夠找到這個具體問題的答案。浮動div與precentage寬度

如果我有一個雙列div佈局,我希望左邊的div具有250px的固定寬度和5%的餘量。 (只是我想要它爲我的設計setupf的方式)...

第二個div(右邊的一個)我想要基本上去屏幕的最後的權利。因此,左邊的div是250px,剩餘邊距是5%,我希望第二個div(右邊的邊)填充瀏覽器的其餘部分。

在第二個div上,我嘗試了一個100%寬度的浮動,但這使得第二個div跳到第一個的底部,並填滿了屏幕。如果我給第二個div一個固定的智商,粗略的浮動工作,但它不會填滿瀏覽器窗口......並且如果移動瀏覽器窗口小於第二個div,它會再次被推下到第一個底部div ...

有無論如何,只是CSS,有一個具有固定寬度的div(和margin-left有一個百分比),而下一個div直接在第一個右邊(就像float一樣工作)與100%(或類似的東西)的百分比,以便它填充屏幕的其餘部分?

o ya我也需要兩個div高度100%,如果這有所作爲...謝謝!

回答

2

這樣寫:

CSS

.left{ 
    float:left; 
    background:red; 
    width:250px; 
    margin-left:5%; 
} 
.right{ 
    overflow:hidden; 
    background:green; 
} 

HTML

<div class="left">fixed</div> 

<div class="right">right</div> 

入住這http://jsfiddle.net/ds8Ws/

+0

OMG真的嗎?所以我認爲隱藏的溢出只是爲了移除滾動條,你能詳細說明它是如何工作的嗎?你甚至沒有100%的寬度! – mike 2012-08-08 08:38:05

+0

我只想說我和我的朋友都是網頁設計師,我們一直試圖弄清楚這一整天...我想我們需要閱讀我們的基本CSS ...溢出:隱藏..... woooow 然而繼承人另一個,如果我想.right有90%的寬度怎麼辦? – mike 2012-08-08 08:41:55

+0

我想我意識到發生了什麼,溢出:隱藏只是滾動了滾動,這就是點,沒有滾動......沒有浮動到第一個div..touche先生的底部!我仍然想知道如何讓第二個div有一個百分比,那會很棒! – mike 2012-08-08 08:55:21