2013-05-09 100 views
2

我有3個div內聯。其中2個設置了px寬度(外部div)。當窗口調整時,我希望中心div填充兩個外部div之間的所有空間。固定寬度div之間拉伸中心div的問題

這是我嘗試的例子: http://jsfiddle.net/3ZPHT

#div_1 { 
    float: left; 
    background: red; 
    display: inline-block; 
    width: 300px; 
    height: 50px; 
    text-align: left;} 
#div_2 { 
    overflow: hidden; 
    background: green; 
    display: inline-block; 
    height: 50px; 
    text-align: center; 
} 
#div_3 { 
    float: right; 
    display: inline-block; 
    background: blue; 
    width: 350px; 
    text-decoration: underline; 
    font-weight: bold; 
    color: white; 
    height: 50px; 
    text-align: right; 
} 

這裏是什麼,我希望它看起來像一個想法: http://jsfiddle.net/Q8eVz

任何幫助是非常讚賞,謝謝。

+0

那麼,什麼是錯的例子嗎? – Kenneth 2013-05-09 22:23:24

+1

你的意思是像http://jsfiddle.net/ExplosionPIlls/3ZPHT/2/? – 2013-05-09 22:23:55

+0

就是這樣。我忽略了html,只看了一下CSS。我沒有意識到中間div應該在html的外部div之後列出。謝謝你的幫助。 – 2013-05-09 22:34:10

回答

5

演示:http://jsfiddle.net/3ZPHT/1/

HTML:

<div> 
    <div id="div_1">LEFT COL STATIC WIDTH 300px</div> 
    <div id="div_3">RIGHT COL STATIC WIDTH 350px</div> 
    <div id="div_2">CENTER COL DYNAMIC WIDTH</div> 
</div> 

CSS:

#div_1 { 
    float: left; 
    background: red; 
    display: inline-block; 
    width: 300px; 
    height: 50px; 
    text-align: left;} 
#div_2 { 
    overflow: hidden; 
    background: green; 
    display: block; 
    height: 50px; 
    text-align: center; 
} 
#div_3 { 
    float: right; 
    display: inline-block; 
    background: blue; 
    width: 350px; 
    text-decoration: underline; 
    font-weight: bold; 
    color: white; 
    height: 50px; 
    text-align: right; 
} 
+1

非常感謝。我剛剛一直在與CSS鬥爭。我甚至沒有想過改變html並在外部div之後放置中間div。 – 2013-05-09 22:30:15

+0

不客氣,很高興爲您提供幫助。 – Arbel 2013-05-09 22:34:22