Các tab giao diện người dùng jQuery: cách đặt div với float: thuộc tính bên trái vào tab?

Question

Tôi sử dụng giao diện người dùng jQuery 1.8.16 cho các tab. Tôi muốn đặt trong tab đầu tiên vài divs dưới dạng cột (với thuộc tính float:left).

Nhưng tôi không thể làm điều đó một cách chính xác: có vẻ như các tab không muốn làm việc với thuộc tính float theo cách thích hợp (xem hình bên dưới văn bản).

Có mã:

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">First</a></li> 
     <li><a href="#tabs-2">Second</a></li> 
     <li><a href="#tabs-3">Third</a></li> 
    </ul> 
     <div id="tabs-1"> 
       <div style="border:1px solid red;float:left;"> 
        some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br> 
       </div> 
     </div> 
     <div id="tabs-2"></div> 
     <div id="tabs-3"></div> 

</div> 

Làm thế nào để khắc phục điều đó?

Cảm ơn!

Answer 1

Bạn phải clear your floats để các thùng chứa để tính chiều cao thích hợp:

<div id="tabs-1"> 
    <div style="border: 1px solid red; float: left;"> 
     some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br> 
    </div> 
    <div style="clear: both;"></div> 
</div> 

Bạn có thể xem kết quả trong this fiddle.