新しい行にドロップする代わりに浮動小数点divを縮小する

浮動小数点のdivを強制的に縮小して新しい行にすることはできますか？新しい行にドロップする代わりに浮動小数点divを縮小する

私はdivに暗黙的な幅を設定できることは知っていますが、項目にはさまざまな量の項目が含まれている可能性があります。可能であれば、サイトのレイアウト流体を維持しながら、これを実行しようとしています。コード

<html> 
<head> 

    <style type="text/css"> 
    #left{ 
     float: left; 
     border: 1px solid #000; 
    } 

    #right{ 
     float: right; 
     border: 1px solid #000; 
    } 
</style> 

</head> 

<body> 

<div id="left"><p>This div represents the logo</p></div> 
<div id="right"><p>When the window's width is reduced and these divs touch 
    I want this div to shrink instead of falling to the next line. 
    </p> 
</div> 

</body> 

</html>

を表示する編集

は基本的に、私は、ブラウザウィンドウがなく、それが窓は、さらにサイズ変更されたときに収縮し、その後、最初の行をドロップ有するよりも収縮したとき#rightが収縮を開始します。

出典

2010-11-26 George Kendros

DIVを浮動させる効果の1つは、DIvが本来の幅に「縮む」ということです。なぜなら、なぜ新しい行に進んでいるのか理解できるようにコードを表示する必要があるからです。 –

上記の記事を編集し、いくつかのサンプルコードを追加しました。 –

これらの2つのdivを相対的な（パーセンテージなどの）幅で与えることを試みましたか？

明示的に幅を固定または相対に宣言せずに浮動させると、寸法はデフォルトで「自動」になります。 Autoはdivのコンテンツの幅を強制します。ブラウザが縮小すると、他の要素に触れることによって強制的に折りたたまれるまで、コンテンツはこれらのボックスをその幅に強制します。

自動幅を使用することはレイアウトで流動性を実現する最善の方法ではありません。ある程度の相対的な次元をどこかに指定する必要があります。そうしないと、この問題は完全に避けられません。

もっと流動的なレイアウトを実現するのに役立つリソースがたくさんあります（www.alistapart.comの多くの記事でこれについてかなり深く説明しています）。

出典

2010-11-26 23:24:02 Jon

それは完全に機能しました。私がサポートしたい最小幅は、ロゴdivの幅を差し引いた残りの幅をパーセンテージ（つまり、700px分の幅 - 140pxのロゴdiv = 560pxまたは80％）としました。 –

CSSのdisplayプロパティでは、inlineに設定し、divはspanのように動作します。

出典

2010-11-26 01:17:52 cambraca

まだ次の行に落ちています。行には左浮動要素と右浮動要素があります（ロゴが左に浮かび、右に浮かぶメニュー） –

何が起きているかを見るためにコードを表示できますか？ – cambraca

オリジナルの投稿をいくつかのコードで編集しました。 –

新しい行にドロップする代わりに浮動小数点divを縮小する

答えて

関連する問題