固定幅と水平スクロールを持つ動的な幅のコンテナdiv?

私はビューポートを越えて水平にスクロールするコンテナ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>
4

1 答え

<div id="container">
  <div id="a">fixed width content</div>
  <div id="b">
    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;
}

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

複数のイメージが必要な場合は、次のように追加します。

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

より多くの画像を含む例: http://jsfiddle.net/KefJ2/1/ 明らかに、あなたは #b のテキストと画像のレイアウトで遊ばなければなりませんが、それは十分に簡単です:)

6
追加された
それは動作しません。それは #a #b#c を縦に積み重ねます。
追加された 著者 Jeff,
ジェフ私は答えを更新しました。私は今までこれを見る時間がなかった。
追加された 著者 Ivan Ivanić,
私はこれで作業を楽しんだ、あまりにも多くのPHP最近...このエキサイティングな質問に感謝します。
追加された 著者 Ivan Ivanić,