2009-02-27 18 views
5

x divを保持する100%幅のDIVコンテナがあります。最後の子DIVは右に浮動し、残りは左に浮動する。すべての子DIVは、バーに収まっている限り、ライン内に残ります(すべての左向きのdivを除いて、右のdivに単独で座っています)。ウィンドウのサイズを小さくして子どもに十分な部屋がない場合、それらは水平方向から崩壊します(私は望みません)。この問題を解決するには、DIVコンテナの最小幅を設定できますが、可変幅のDIVがコンテナに可変量存在することが問題です。私は、min-width =すべての子の幅であるコンテナの最小幅を設定できるようにシミュレートしたいと思いますが、可変であるため計算できません(右のdivと残りの部分の間の柔軟なスペースをシミュレートします彼らが許可されるべきであるよりも近くになることは許されない(したがって、divsを崩壊させる))。 http://img3.imageshack.us/img3/933/barfuo.jpgCSS:柔軟な幅をシミュレートする(最小幅なし) -

ありがとう:

は、私は、これはので、ここで少し不明瞭である絵を知っています!

答えて

9

私はそれを(またはむしろ反テーブルの群衆はそれを憎むだろうが)それを言うことは嫌いだが、これはかなり簡単に何を知っている?

それは正しいです:テーブル。隠されたオーバーフローがのみ(彼らは「テーブル・セル」表示タイプだ)の要素をブロックされていないブロック要素とテーブルのセル上で動作しますので、

<style type="text/css"> 
#topbar { width: 100%; } 
#topbar div { white-space: nowrap; overflow: hidden; } 
#topright div { text-align: right; } 
</style> 
<table id="topbar"> 
<tr> 
    <td><div>Item 1</div></td> 
    <td><div>Item 2</div></td> 
    <td><div>Item 3</div></td> 
    <td><div>Item 4</div></td> 
    <td><div>Item 1</div></td> 
    <td id="topright"><div>Item Right</div></td> 
</tr> 
</table> 

内部のdivが重要です。

+0

あなたが言うように。私の目では、スペースが足りないときに左揃えのdivが折り返してはならないという要件が、本当にキラーです。テーブルは、この種の効果を得る唯一の実用的な方法です。 – ddaa

+0

javascriptを使用して最後のdivのサイズを変更できますか? –

+0

テーブルがその場所にあります。初心者はそれらを酷使します。 –

関連する問題