具有固定高度和水平滚动条的动态宽度容器div？

Question

我想要一个容器div，它能够在视口之外水平滚动。就像一个全屏的胶片条，其中#a是开头，#c是结尾。 #a和#c都是固定宽度的div，并且#b有动态宽度的图片内容。我遇到的问题是让#container的宽度动态改变以适应#b。将#container的宽度设置为auto或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>

- Jeff

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中调整文本和图像布局，但应该很容易 :)

- Ivan Ivanic

---

那不起作用。它会导致 #a、#b 和 #c 垂直堆叠。 - Jeff

Jeff，我更新了答案。直到现在我才有时间查看这个问题。 - Ivan Ivanic

我太享受在这上面工作了，最近做了太多的PHP...感谢这个令人兴奋的问题。 - Ivan Ivanic