Comment puis-je arrêter le flotteur à gauche?

97

J'ai le code suivant:

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

Mon problème est que le div avec la classe adm flotte vers la gauche et va donc sur la même ligne que l'étiquette et deux boutons d'entrée. Y a-t-il un moyen que je puisse éviter de flotter?

css html css-float TonyG
la source
Vous devriez accepter une réponse, même si c'est la vôtre.
DᴀʀᴛʜVᴀᴅᴇʀ

Réponses:

101

Une approche standard consiste à ajouter un div de compensation entre les deux éléments flottants au niveau du bloc:

<div style="clear:both;"></div>
Alose
la source
3
Mais dans certains cas, vous devez ajouterdisplay:block
Volodymyr Levytskyi
62

Parfois, clear ne fonctionnera pas. Utiliser float: nonecomme remplacement

DanKodi
la source
2
Oui, si vous souhaitez remplacer une entrée CSS existante float: left(ou à droite), c'est la solution.
Alexis Wilke
28

Vous pouvez modifier .admet ajouter

.adm{
 clear:both;
}

Cela devrait le faire passer à une nouvelle ligne

Brett
la source
Cela devrait être .admje pense.
tjm
9

ajouter style="clear:both;"au "adm" div.

tjm
la source
4

D'accord, je viens de réaliser que la réponse est de supprimer le premier flotteur à gauche du premier DIV. Je ne sais pas pourquoi je n'ai pas vu ça avant.

TonyG
la source
3

Vous devriez également vérifier la propriété "clear" en css au cas où la suppression d'un float ne serait pas une option

Trey
la source
3

Le css clear: leftde votre classe adm devrait empêcher le div flottant avec les éléments au-dessus.

Chris Kent
la source
0

Ajoutez simplement overflow:hiddenle premier divstyle. Cela devrait suffire.

ensoleillé
la source
0

Pour une raison quelconque, aucun des correctifs ci-dessus n'a fonctionné pour moi (j'ai eu le même problème), mais cela a fonctionné:

Essayez de mettre tous les éléments flottaient dans un élément div: <div class="row">...</div>.

Ajoutez ensuite ce CCS: .row::after {content: ""; clear: both; display: table;}

Ezgor
la source