Bagaimana saya bisa menghentikan float kiri?

98

Saya memiliki kode berikut:

<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>

Masalah saya adalah bahwa div dengan class adm mengapung ke kiri dan seterusnya pada baris yang sama dengan label dan dua tombol input. Adakah cara agar saya dapat membuat pergeseran ini menjauh dari mengambang?

css html css-float

— TonyG
sumber

Anda harus menerima jawaban, meskipun itu jawaban Anda sendiri.

— DᴀʀᴛʜVᴀᴅᴇʀ

101

Pendekatan standar adalah menambahkan div kliring antara dua elemen level blok mengambang:

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

— Shad
sumber

3

Tetapi dalam beberapa kasus Anda perlu menambahkandisplay:block

— Volodymyr Levytskyi

64

Terkadang jelas tidak akan berhasil. Gunakan float: nonesebagai pengganti

— DanKodi
sumber

3

Ya, jika Anda ingin mengganti entri CSS yang sudah ada float: left(atau kanan) maka ini solusinya.

— Alexis Wilke

28

Anda dapat memodifikasi .admdan menambahkan

.adm{
 clear:both;
}

Itu harus membuatnya pindah ke baris baru

— Brett
sumber

Seharusnya itu yang .admsaya pikirkan.

— tjm

9

tambahkan style="clear:both;"ke "adm" div.

— tjm
sumber

4

Oke saya baru menyadari jawabannya adalah menghapus float pertama yang tersisa dari DIV pertama. Tidak tahu mengapa saya tidak melihat itu sebelumnya.

— TonyG
sumber

3

Anda juga harus memeriksa properti "clear" di css jika menghapus float bukanlah suatu pilihan

— Angka tiga
sumber

3

CSS clear: leftdi kelas adm Anda harus menghentikan div mengambang dengan elemen di atasnya.

— Chris Kent
sumber

0

Tambahkan saja gaya overflow:hiddenpertama div. Itu sudah cukup.

— cerah
sumber

0

Untuk beberapa alasan tidak ada perbaikan di atas yang berhasil untuk saya (saya memiliki masalah yang sama), tetapi ini berhasil:

Cobalah menempatkan semua elemen melayang dalam elemen div: <div class="row">...</div>.

Kemudian tambahkan CCS ini: .row::after {content: ""; clear: both; display: table;}

— Ezgor.dll
sumber