Làm thế nào tôi có thể dừng phao bên trái?

97

Tôi có mã sau:

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

Vấn đề của tôi là div với lớp adm nổi ở bên trái và do đó đi trên cùng một dòng với nhãn và hai nút đầu vào. Có cách nào để tôi có thể làm cho sự thay đổi này khỏi trôi nổi không?

css html css-float

— TonyG
nguồn

Bạn nên chấp nhận một câu trả lời, ngay cả khi nó là của riêng bạn.

— DᴀʀᴛʜVᴀᴅᴇʀ

101

Một cách tiếp cận tiêu chuẩn là thêm một div bù trừ giữa hai phần tử cấp khối động:

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

— Shad
nguồn

3

Nhưng trong một số trường hợp, bạn cần phải thêmdisplay:block

— Volodymyr Levytskyi

62

Đôi khi rõ ràng sẽ không hoạt động. Sử dụng float: nonenhư một ghi đè

— DanKodi
nguồn

2

Có, nếu bạn muốn ghi đè một mục CSS hiện có float: left(hoặc bên phải) thì đây là giải pháp.

— Alexis Wilke,

28

Bạn có thể sửa đổi .admvà thêm

.adm{
 clear:both;
}

Điều đó sẽ làm cho nó chuyển sang một dòng mới

— Brett
nguồn

Đó là .admtôi nghĩ.

— tjm

9

thêm style="clear:both;"vào "adm" div.

— tjm
nguồn

4

Được rồi, tôi vừa nhận ra câu trả lời là loại bỏ phao đầu tiên còn lại khỏi DIV đầu tiên. Không biết tại sao tôi không thấy điều đó trước đây.

— TonyG
nguồn

3

Bạn cũng nên kiểm tra thuộc tính "clear" trong css trong trường hợp xóa float không phải là một tùy chọn

— Trey
nguồn

3

Css clear: lefttrong lớp adm của bạn nên dừng div nổi với các phần tử phía trên nó.

— Chris Kent
nguồn

0

Chỉ cần thêm overflow:hiddenvào divkiểu đầu tiên . Như vậy là đủ.

— nắng
nguồn

0

Vì một số lý do mà không có bản sửa lỗi nào ở trên phù hợp với tôi (tôi cũng gặp sự cố tương tự), nhưng điều này đã xảy ra:

Hãy thử đặt tất cả những yếu tố nổi trong một phần tử div: <div class="row">...</div>.

Sau đó thêm CCS này: .row::after {content: ""; clear: both; display: table;}

— ezgor
nguồn