タグ付けされた質問 「css-float」

CSSではoverflow:hidden、フローティング子の高さで拡張できるように、が親コンテナに設定されています。 しかし、それと組み合わせると、別の興味深い機能もありmargin: autoます... PREVIOUS兄弟がフローティング要素である場合、実際にはそれと並置されて表示されます。つまり、兄弟がその場合、float:leftコンテナfloat:none overflow:hiddenは兄弟の右側に表示され、改行は表示されません。通常のフローに浮かんでいるかのように表示されます。前の兄弟がfloat:rightその場合、コンテナは兄弟の左側に表示されます。このコンテナのサイズを変更すると、フローティング要素の中央に正確に表示されます。あなたが以前の2人の兄弟、1があれば言ってやるがfloat:left他にfloat:right、コンテナは2わたってるしき中央に表示されます。 だからここに問題があります... 子供をマスキングせずにそのタイプのレイアウトを維持するにはどうすればよいですか？ Web全体をグーグルで検索するclear:bothと、コンテナを拡張する方法がわかります...しかし、左/右の前の子の中心を維持するための代替ソリューションは見つかりません。コンテナを作成すると、コンテナoverflow:visibleは突然フローティング要素のレイアウトフローを無視し、フローティング要素の上に階層化されて表示されます。 だから質問： overflow:hiddenレイアウトを維持するためにコンテナが必要です... 子供たちがマスクされないようにするにはどうすればよいですか？コンテナの外側で、子を親に対して絶対的に配置する必要があります。 または overflow:visibleコンテナの外側で親に対して子を絶対に配置できるようにするにはどうすればよいですか...まだ兄弟のfloat-like-layout-flowを保持しますか？

100 css  overflow  css-float  center  hidden 

私は次のコードを持っています： <div style="float: left; width: 100%;"> <label style="float: left;">ABC</label> <input style="float: left; font-size: 0.5em;" type="button" onclick="addTiny(0,'Question_Text'); return false;" value="▼" title="Editor" /> <input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="▲" title="Hide" /> <div class="adm"> <textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor"> abc </textarea> </div> </div> 私の問題は、クラスadmのdivが左に浮動するため、ラベルと2つの入力ボタンと同じ行に配置されることです。これをフローティングからシフトする方法はありますか？

97 css  html  css-float 

外側divにdiv浮いているそのs を包むために黒のアウターが欲しい。自動的にコンテンツの高さ（たとえば、フローティングs）にしたいので、id style='height: 200pxでを使用したくありません。divouterdivdiv <div id='outerdiv' style='border: 1px solid black;background-color: black;'> <div style='width=300px;border: red 1px dashed;float: left;'> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </div> <div style='width=300px;border: red 1px dashed;float: right;'> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> </div> これを達成する方法は？

94 css  html  css-float 

CSSを使用してdivを2つの列に分割しようとしましたが、まだ機能していません。私の基本的な構造は次のとおりです： <div id="content"> <div id="left"> <div id="object1"></div> <div id="object2"></div> </div> <div id="right"> <div id="object3"></div> <div id="object4"></div> </div> </div> 右と左のdivをそれぞれの位置（右と左）にフロートしようとすると、コンテンツdivの背景色が無視されるようです。そして、私がさまざまなウェブサイトから試した他のコードは、私の構造に変換することができないようです。 助けてくれてありがとう！

89 css  html  css-float 

私は次のマークアップを持っています： <li id="CN2787"> <img class="fav_star" src="images/fav.png"> <span>Text, text and more text</span> </li> テキストが折り返されても、画像の「列」に入らないようにする必要があります。私はtable（私がやっていた）でそれを行うことができることを知っていますが、これはこの理由で実行できません。 私は成功せずに以下を試しました： li span {width: 100px; margin-left: 20px} .fav_star {width: 20px} 私も試しましたfloat: right。 ありがとう。 編集：私はそれをこのように見せたい： IMG Text starts here and keeps going... and wrap starts here. このようではありません： IMG Text starts here and keeps going... and wrap starts in …

87 css  css-float  word-wrap 

ブラウザが狭すぎて収まらない場合に折り返さないdiv（セル）の行が必要です。 Stackを検索しましたが、単純なcssの質問であると思うものに対する実用的な答えが見つかりませんでした。 セルには指定された幅があります。ただし、行の幅は指定したくありません。幅は自動的にその子セルの幅になります。 ビューポートが狭すぎて行を収容できない場合、divはスクロールバーで溢れているはずです。 他の場所で見た多くの解決策を試したので、機能するコードスニペットとして回答を提供してください（幅を指定する：100％で、機能しないようです）。 JavaScriptを使用せずにHTML / CSSのみのソリューションを探しています。 .row { float: left; border: 1px solid yellow; width: 100%; overflow: auto; } .cell { float: left; border: 1px solid red; width: 200px; height: 100px; } <div class="row"> <div class="cell">a</div> <div class="cell">b</div> <div class="cell">c</div> </div> コードスニペットを実行する結果を非表示スニペットを展開 現時点では、行の幅を非常に大きな数にハードコーディングしています。

84 html  css-float  word-wrap 

同じ行に2つの要素があり、左に浮いていて、右に浮いています。 <style type="text/css"> #element1 {float:left;} #element2 {float:right;} </style> <div id="element1"> element 1 markup </div> <div id="element2"> element 2 markup </div> element2をelement1の隣に並べ、2つの間に約10ピクセルのパディングを配置する必要があります。問題は、element2の幅がコンテンツやブラウザ（フォントサイズなど）によって変わる可能性があるため、必ずしもelement1と完全に一致するとは限らないことです（マージンを右に適用して移動することはできません）。 マークアップも変更できません。 それらを並べる統一された方法はありますか？パーセンテージでmargin-rightを試し、element1で負のマージンを試し、element2を近づけました（ただし、機能させることができませんでした）。

84 html  css  css-float  margin