帶有固定高度和水平滾動的動態寬度容器div？

Question

我想獲得一個容器div，將水平滾動超出視口。有點像全屏幻燈片，開頭爲#a，最後爲#c。 #a和#c都是固定寬度的div，並且#b具有動態寬度的圖像內容。我遇到的問題是#container動態更改其寬度以適應#b。將寬度設置爲#container爲自動或100％僅使用視口寬度。

什麼我後：

[- viewport width -] 
--#container--------------------------------------- 
| -------------------------------------------- | 
| | #a |  #b...     | #c | | 
| -------------------------------------------- | 
--------------------------------------------------- 

我的標記：

#container { 
    height:400px; 
    } 
#a { 
    float:left; 
    width:200px; 
    height:400px; 
    } 
#b { 
    float:left; 
    width:auto; 
    height:400px; 
    } 
#c { 
    float:left; 
    width:200px; 
    height:400px; 
    } 


<div id="container"> 
    <div id="a">fixed width content</div> 
    <div id="b">dynamic width content</div> 
    <div id="c">fixed width content</div> 
</div> 

編輯：我可以用一個表做到這一點，但想避免，如果可能的。

編輯2：下面是使用表一個工作版本：

#container { 
    height:400px; 
    background:#fff; 
    } 
#a { 
    width:200px; 
    height:400px; 
    background:#ccc; 
    } 
#b { 
    height:400px; 
    background:yellow; 
    white-space: nowrap; 
    } 
#c { 
    width:200px; 
    height:400px; 
    background:#ccc; 
    } 

<table cellpadding="0" cellspacing="0"> 
    <tr> 
    <td id="a"> 
     a 
    </td> 
    <td id="b"> 
     <img src="..." /> 
     <img src="..." /> 
     <img src="..." />      
    </td> 
    <td id="c"> 
     b 
    </td>  
    </tr> 
</table> 

Answer 1

<div id="container"> 
    <div id="a">fixed width content</div> 
    <div id="b"> 
    <img src="http://karenrothart.com/yahoo_site_admin/assets/images/Landscape_Panorama.13130817_large.jpg" />dynamic width content dynamic width content dynamic width content dynamic width content 
    </div> 
    <div id="c">fixed width content</div> 
</div> 

這裏是不錯的CSS：

div { 
    height: 400px; 
} 

#container { 
    position: relative; /* needed for absolutely positioning #a and #c */ 
    padding: 0 200px; /* will offset for width of #a and #c; and center #b */ 
    border: green 3px dotted; /* just for the show */ 
    float: left; /* To dynamicaly change width according to children */ 
} 

#a, #b { 
    position: absolute; /* causes #a and #b to not respect padding of #container and also gives it its place */ 
    top: 0; 
    width:200px; 
    left: 0; 
} 

#c { 
    right: 0; 
} 

尼斯和光澤例如：http://jsfiddle.net/KefJ2/

如果您需要不止一個圖像，而不是添加這個：

#b { 
    white-space: nowrap; /* causes all direct child elements to be in one line */ 
} 

例與更多的圖像：http://jsfiddle.net/KefJ2/1/ 顯然，你將有#b玩弄文字和圖片的佈局但應該是很容易的:)