Jak mogę zatrzymać unoszenie się w lewo?


100

Mam następujący kod:

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

Mój problem polega na tym, że element div z klasą adm płynie w lewo i przechodzi w tym samym wierszu, co etykieta i dwa przyciski wprowadzania. Czy jest sposób, żebym mógł odejść od unoszenia się?


Powinieneś przyjąć odpowiedź, nawet jeśli jest twoja.
DᴀʀᴛʜVᴀᴅᴇʀ

Odpowiedzi:


102

Standardowym podejściem jest dodanie clearing div między dwoma pływającymi elementami poziomu bloku:

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

3
Ale w niektórych przypadkach trzeba dodaćdisplay:block
Volodymyr Levytskyi

65

Czasami jasne nie zadziała. Użyj float: nonejako nadpisania


3
Tak, jeśli chcesz zastąpić istniejący wpis CSS float: left(lub po prawej), to jest rozwiązanie.
Alexis Wilke,

28

Możesz modyfikować .admi dodawać

.adm{
 clear:both;
}

To powinno spowodować przejście do nowej linii


.admMyślę, że tak powinno być .
tjm


4

OK, właśnie zdałem sobie sprawę, że odpowiedzią jest usunięcie pierwszego pływaka pozostałego z pierwszego DIV. Nie wiem, dlaczego wcześniej tego nie widziałem.


3

Powinieneś także sprawdzić właściwość „clear” w css na wypadek, gdyby usunięcie pływaka nie wchodziło w grę


3

CSS clear: leftw Twojej klasie adm powinien zatrzymać unoszenie się div z elementami nad nim.



0

Z jakiegoś powodu żadna z powyższych poprawek nie zadziałała (miałem ten sam problem), ale tak się stało:

Spróbuj umieszczenie wszystkich elementów pływających w elemencie div: <div class="row">...</div>.

Następnie dodaj ten CCS: .row::after {content: ""; clear: both; display: table;}


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.