有固定高度和水平滚动的动态宽度集装箱分区?

I'm trying to get a container div that will scroll horizontally beyond the viewport. Sort of like a fullscreen filmstrip with #a at the beginning and #c at the end. Both #a and #c are fixed width divs, and #b has dynamic width image content. The problem I'm having is getting #container to change its width dynamically to accommodate #b. Setting #container width to auto or 100% just uses the viewport width.

我正在尝试获得一个容器div，它将在viewport之外水平滚动。有点像全屏电影，开头是#a，结尾是#c。#a和#c都是固定宽度的div， #b有动态宽度的图像内容。我所遇到的问题是，要让#容器动态地更改它的宽度，以容纳#b。将#container width设置为auto或100%只使用viewport width。

What I'm after:

我所追求的:

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

My markup:

我的标记:

#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>

Edit: I can do this with a table, but would like to avoid that if possible.

编辑:我可以用表格来做这个，但是如果可能的话，我想避免这样做。

Edit 2: Here's a working version using tables:

编辑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>

1 个解决方案

#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>

Here is good css:

这是很好的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;
}

Nice and shiny example: http://jsfiddle.net/KefJ2/

很好的闪亮的例子:http://jsfiddle.net/KefJ2/

If you need more than one image than add this:

如果您需要多于一个图片，请添加以下内容:

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

Example with more images: http://jsfiddle.net/KefJ2/1/ Obviously you will have to play around with text and images layout in #b but that should be easy enough :)

关于更多图片的示例:http://jsfiddle.net/KefJ2/1/显然，您将不得不在#b中处理文本和图像布局，但这应该足够简单:)

#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>