2009-08-31 92 views
17

我有我傳統上使用一個表來解決,但希望得到它與CSS做了一些建議一個很常見的佈局問題。我有3個圖像構成一個'容器'。左側和右側圖像通常只使用標籤顯示,中間圖像顯示爲「背景圖像」,其內容顯示在容器中,我相信你已經看過/使用上萬遍:CSS佈局 - 動態寬度DIV

<table width="100" cellpadding="0"><tr> 
<td width="50"><img src="myleftimage" /></td> 
<td style="background: url('mymiddleimage');">Content goes here...</td> 
<td width="50"><img src="myrightimage" /></td> 
</tr></table> 

關於這樣做的好處是,表格的寬度是始終瀏覽器(或母)的寬度,中間一欄,其中的內容是動態的尺寸佔用左/右圖像之間的剩餘空間

我想是重新創建使用CSS,以儘可能少的硬編碼信息什麼,所以這樣的事情:。

<div style="float:left; width:100%"> 
    <div style="width: 50px;float:left;"><img src="myleftimage" /></div> 
    <div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div> 
    <div style="width: 50px;float:left;"><img src="myrightimage" /></div> 
</div> 

這個偉大的工程接受中間格,我要如何設置寬度?現在我可以將它硬編碼爲92%等,但我想要的是自動填充空間。它可以只使用CSS來完成嗎?

回答

21

嘗試

<div style="width:100%;"> 
    <div style="width:50px; float: left;"><img src="myleftimage" /></div> 
    <div style="width:50px; float: right;"><img src="myrightimage" /></div> 
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div> 
</div> 

<div style="width:100%; border:2px solid #dadada;"> 
    <div style="width:50px; float: left;"><img src="myleftimage" /></div> 
    <div style="width:50px; float: right;"><img src="myrightimage" /></div> 
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div> 
<div style="clear:both"></div>  
</div> 
+1

謝謝 - 這些都是非常好的反應,但我認爲這個最適合我的需求,因爲它在邊緣使用「自動」。這樣它可以重複使用一點,如果我用JavaScript重新調整圖像大小,它應該適應變化(我認爲)。 – 2009-09-01 18:13:25

9

這會做你想做的。固定50px寬的邊,內容填充剩餘區域。

<div style="width:100%;"> 
    <div style="width: 50px; float: left;">Left Side</div> 
    <div style="width: 50px; float: right;">Right Side</div> 
    <div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div> 
</div> 
+1

當使用基於浮動的佈局,您可能還需要清除花車(http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-c learing-techniques /),和/或在父div上設置最小寬度以防止浮動包裝。 – AaronSieb 2009-08-31 19:47:04

5

或者,如果你知道這兩個 「面」 上的圖像的寬度和不想處理花車:

<div class="container"> 
    <div class="left-panel"><img src="myleftimage" /></div> 
    <div class="center-panel">Content goes here...</div> 
    <div class="right-panel"><img src="myrightimage" /></div> 
</div> 

CSS:

.container { 
    position:relative; 
    padding-left:50px; 
    padding-right:50px; 
} 

.container .left-panel { 
    width: 50px; 
    position:absolute; 
    left:0px; 
    top:0px; 
} 

.container .right-panel { 
    width: 50px; 
    position:absolute; 
    right:0px; 
    top:0px; 
} 

.container .center-panel { 
    background: url('mymiddleimage'); 
} 

注:

位置:父div上的相對位置用於使絕對定位的子級相對於該節點定位自己。

+0

您的解決方案對我來說就像一個魅力謝謝! – bAN 2011-10-04 07:35:20