フロートを左に止めるにはどうしたらいいですか?


97

私は次のコードを持っています:

<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="&#x25BC;" title="Editor" />   
  <input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="&#x25B2;" title="Hide" />   

  <div class="adm">
    <textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor">
      abc
    </textarea>
  </div>
</div>

私の問題は、クラスadmのdivが左に浮動するため、ラベルと2つの入力ボタンと同じ行に配置されることです。これをフローティングからシフトする方法はありますか?


自分の答えであっても、受け入れる必要があります。
DᴀʀᴛʜVᴀᴅᴇʀ

回答:


101

標準的なアプローチは、2つのフローティングブロックレベル要素の間にクリアdivを追加することです。

<div style="clear:both;"></div>

3
しかし、場合によっては追加する必要がありますdisplay:block
Volodymyr Levytskyi 14

62

時々、クリアは機能しません。float: noneオーバーライドとして使用


2
はい、既存のCSSエントリfloat: left(または権利)を上書きする場合は、これが解決策です。
Alexis Wilke

28

変更.admして追加できます

.adm{
 clear:both;
}

新しい行に移動するはずです


そうだと.adm思います。
tjm

9

style="clear:both;"「adm」に追加しdivます。


4

さて、私は答えが最初のDIVから残っている最初のフロートを削除することであることに気づきました。なぜそれを見たことがないのかわからない。


3

floatの削除がオプションではない場合は、cssの「clear」プロパティも確認してください。


3

clear: leftadmクラスのcss は、divがその上の要素で浮動するのを停止する必要があります。


0

overflow:hidden最初のdivスタイルを追加するだけです。それで十分でしょう。


0

何らかの理由で上記の修正はどれもうまくいきませんでしたが(同じ問題がありました)、これはうまくいきました:

float要素をすべてdiv要素に入れてみてください。 <div class="row">...</div>

次に、このCCSを追加します。 .row::after {content: ""; clear: both; display: table;}

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.