私はビューポートを越えて水平にスクロールするコンテナdivを取得しようとしています。最初は #a
、最後に #c
というフルスクリーンのフィルムストリップのように並べ替えてください。 #a
と #c
は固定幅divで、 #b
は動的幅の画像コンテンツを持ちます。私が抱えている問題は、 #b
に対応するために幅を動的に変更する #container
です。 #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>
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:
#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">
</td>
<td id="c">
b
</td>
</tr>
</table>