如何强制div出现在下面不是另一个？ [英] How to force div to appear below not next to another?

问题描述

我想把我的div放在列表下面，但实际上它放在列表旁边。列表是动态生成的，所以它没有固定的高度。我想在右边的地图div，并在左边（地图旁边）列表放在顶部和第二个div下面的列表（但仍然在右边的地图）

I would like to place my div below the list, but actually it is placed next to the list.The list is generated dynamically, so it doesn't have a fixed hight. I would like to have the map div on the right, and on the left (next to the map) the list placed on top and the second div below the list(but still on the right to the map)

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

任何想法？

推荐答案

我想你需要一个额外的封装div。

I think what you want requires an extra wrapper div.

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

这篇关于如何强制div出现在下面不是另一个？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！