Come posso smettere di galleggiare a sinistra?

97

Ho il codice seguente:

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

Il mio problema è che il div con class adm fluttua a sinistra e quindi va sulla stessa riga dell'etichetta e dei due pulsanti di input. C'è un modo in cui posso allontanarmi dal fluttuare?

css html css-float

— TonyG
fonte

Dovresti accettare una risposta, anche se è la tua.

— DᴀʀᴛʜVᴀᴅᴇʀ

101

Un approccio standard consiste nell'aggiungere un div di compensazione tra i due elementi a livello di blocco mobile:

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

— Shad
fonte

3

Ma in alcuni casi è necessario aggiungeredisplay:block

— Volodymyr Levytskyi

62

A volte Clear non funziona. Usa float: nonecome override

— DanKodi
fonte

2

Sì, se vuoi sovrascrivere una voce CSS esistente float: left(o destra), questa è la soluzione.

— Alexis Wilke

28

Puoi modificare .adme aggiungere

.adm{
 clear:both;
}

Questo dovrebbe farlo passare a una nuova riga

— Brett
fonte

Dovrebbe essere, .admcredo.

— tjm

9

aggiungi style="clear:both;"ad "adm" div.

— tjm
fonte

4

Ok, ho appena capito che la risposta è rimuovere il primo galleggiante rimasto dal primo DIV. Non so perché non l'ho visto prima.

— TonyG
fonte

3

Dovresti anche controllare la proprietà "clear" in css nel caso in cui la rimozione di un float non sia un'opzione

— Trey
fonte

3

Il css clear: leftnella tua classe adm dovrebbe fermare il div fluttuante con gli elementi sopra di esso.

— Chris Kent
fonte

0

Basta aggiungere overflow:hiddenil primo divstile. Dovrebbe bastare.

— soleggiato
fonte

0

Per qualche motivo nessuna delle soluzioni precedenti ha funzionato per me (ho avuto lo stesso problema), ma questo ha funzionato:

Prova a mettere tutti gli elementi galleggiava in un elemento div: <div class="row">...</div>.

Quindi aggiungi questo CCS: .row::after {content: ""; clear: both; display: table;}

— ezgor
fonte