Как мне перестать плыть влево?

98

У меня такой код:

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

Моя проблема в том, что div с классом adm плавает слева и, следовательно, находится в той же строке, что и метка и две кнопки ввода. Есть ли способ избавиться от плавания?

css html css-float TonyG
источник
Вы должны принять ответ, даже если он ваш собственный.
DᴀʀᴛʜVᴀᴅᴇʀ 02

Ответы:

101

Стандартный подход - добавить очищающий div между двумя элементами уровня плавающего блока:

<div style="clear:both;"></div>
Шад
источник
3
Но в некоторых случаях нужно добавитьdisplay:block
Владимир Левицкий
64

Иногда очистить не получится. Использовать float: noneкак замену

DanKodi
источник
3
Да, если вы хотите переопределить существующую запись CSS float: left(или правую), тогда это решение.
Alexis Wilke
28

Вы можете изменить .admи добавить

.adm{
 clear:both;
}

Это должно переместить его на новую строку

Бретт
источник
.admДумаю, так должно быть .
tjm 01
4

Хорошо, я только что понял, что ответ - удалить первый поплавок, оставшийся от первого DIV. Не знаю, почему я этого раньше не видел.

TonyG
источник
3

Вы также должны проверить свойство "clear" в css на случай, если удаление float не является вариантом

Трей
источник
3

CSS clear: leftв вашем классе adm должен остановить перемещение div с элементами над ним.

Крис Кент
источник
0

Просто добавьте overflow:hiddenпервый divстиль. Этого должно быть достаточно.

солнечно
источник
0

По какой-то причине у меня не сработало ни одно из вышеперечисленных исправлений (у меня была такая же проблема), но это сработало:

Попробуйте положить все плавали элементов в сНу элемента: <div class="row">...</div>.

Затем добавьте этот CCS: .row::after {content: ""; clear: both; display: table;}

езгор
источник