Làm cách nào để bắt buộc div xuất hiện bên dưới không bên cạnh người khác?

Question

Tôi muốn đặt div của tôi bên dưới danh sách, nhưng thực sự nó được đặt bên cạnh danh sách. Danh sách được tạo động, vì vậy nó không có điểm cố định. Tôi muốn có bản đồ div ở bên phải và bên trái (bên cạnh bản đồ) danh sách được đặt ở trên cùng và div thứ hai bên dưới danh sách (nhưng vẫn ở bên phải bản đồ)

#map { float:left; width:700px; height:500px; } 
#list { float:left; width:200px; background:#eee; list-style:none; padding:0; } 
#similar { float:left; width:200px; background:#000; } 


    <div id="map"></div>   
    <ul id="list"></ul> 
    <div id ="similar"> 
    this text should be below, not next to ul. 
    </div> 

Bất kỳ ý tưởng nào?

Answer 1

Tôi nghĩ rằng những gì bạn muốn yêu cầu một div wrapper bổ sung.

<style> 
    #map { 
     float: left; 
     width: 700px; 
     height: 500px; 
    } 
    #wrapper { 
     float: left; 
     width: 200px; 
    } 
    #list { 
     background: #eee; 
     list-style: none; 
     padding: 0; 
    } 
    #similar { 
     background: #000; 
    } 
</style> 

<div id="map"></div>   
<div id="wrapper"> 
    <ul id="list"></ul> 
    <div id ="similar"> 
    this text should be below, not next to ul. 
    </div> 
</div> 

Answer 2

sử dụng rõ ràng: bên trái; hoặc rõ ràng: cả trong css của bạn.

#map { float:left; width:700px; height:500px; } 
#list { float:left; width:200px; background:#eee; list-style:none; padding:0; } 
#similar { float:left; width:200px; background:#000; clear:both; } 


<div id="map"></div>   
<ul id="list"></ul> 
<div id ="similar"> 
this text should be below, not next to ul. 
</div> 

Answer 3

#similar { 
float:left; 
width:200px; 
background:#000; 
clear:both; 
} 

Answer 4

gì u cũng có thể làm tôi đặt thêm một "dummy" div trước div cuối cùng của bạn.

Làm cho nó 1 px heigh và chiều rộng là rất cần thiết để trang trải container div/body

này sẽ làm cho div cuối cùng xuất hiện dưới nó, bắt đầu từ bên trái.

Answer 5

Float các #list và #similar bên phải và thêm clear: right;-#similar

Giống như vậy:

#map { float:left; width:700px; height:500px; } 
#list { float:right; width:200px; background:#eee; list-style:none; padding:0; } 
#similar { float:right; width:200px; background:#000; clear:right; } 


<div id="map"></div>   
<ul id="list"></ul> 
<div id="similar">this text should be below, not next to ul.</div> 

Bạn có thể cần một wrapper (div) xung quanh tất cả trong số họ mặc dù đó là cùng một chiều rộng của phần tử bên trái và bên phải.

Answer 6

#map { 
    float: right; 
    width: 700px; 
    height: 500px; 
} 
#list { 
    float:left; 
    width:200px; 
    background: #eee; 
    list-style: none; 
    padding: 0; 
} 
#similar { 
    float: left; 
    clear: left; 
    width: 200px; 
    background: #000; 
} 

Đây là fiddle.