div가 다른 옆에 나타나지 않도록 강제하는 방법은 무엇입니까?

div가 다른 옆에 나타나지 않도록 강제하는 방법은 무엇입니까?

---

내 div를 목록 아래에 배치하고 싶지만 실제로는 목록 옆에 배치됩니다. 목록은 동적으로 생성되므로 고정 높이가 없습니다. 지도 div를 오른쪽에, 왼쪽 (지도 옆)에 목록을 맨 위에 배치하고 두 번째 div를 목록 아래에 배치하고 싶습니다 (하지만 여전히지도 오른쪽에 있음).

#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">Lorem Ipsum</div>        
<ul id="list"><li>Dolor</li></li>Sit</li><li>Amet</li></ul>
<div id ="similar">
    this text should be below, not next to ul.
</div>

어떤 아이디어?

---

원하는 것은 여분의 래퍼 div가 필요하다고 생각합니다.

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

<div id="map">Lorem Ipsum</div>        
<div id="wrapper">
  <ul id="list"><li>Dolor</li><li>Sit</li><li>Amet</li></ul>
  <div id ="similar">
    this text should be below, not next to ul.
  </div>
</div>

---

사용 clear : left; 또는 clear : 둘 다 CSS에 있습니다.

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

---

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

---

플로트 #list와 #similar권리를하고 추가 clear: right;로#similar

이렇게 :

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

왼쪽과 오른쪽 요소의 너비가 같더라도 모두 주위에 wrapper (div)가 필요할 수 있습니다.

---

당신이 할 수있는 일은 마지막 div 앞에 여분의 "더미"div를 배치합니다.

컨테이너 div / body를 덮는 데 필요한만큼 높이와 너비를 1 픽셀로 만듭니다.

This will make the last div appear under it, starting from the left.

---

#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;
}

참고URL : https://stackoverflow.com/questions/2492873/how-to-force-div-to-appear-below-not-next-to-another