Как вынудить отделение появиться ниже не рядом с другим?
Я хотел бы разместить свое отделение ниже списка, но на самом деле это помещается рядом со списком. Список сгенерирован динамично, таким образом, он не имеет фиксированного верхнего уровня. Я хотел бы иметь отделение карты справа, и слева (рядом с картой) список, помещенный в вершину и второе отделение ниже списка (но все еще справа к карте)
#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>Какие-либо идеи?
5 ответов
Я думаю, что вам нужна дополнительная оболочка div.
#map {float: left; ширина: 700 пикселей; высота: 500 пикселей; } #wrapper {float: left; ширина: 200 пикселей; } #list {background: #eee; стиль списка: нет; отступ: 0; } #similar {background: # 000; } Lorem Ipsum - Долор
- Сидеть
- Амет
этот текст должен быть ниже, а не рядом с ul. используйте clear: left; или ясно: как в вашем 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; to #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>
Вам может понадобиться обертка (div) вокруг всех них, хотя ширина левого и правого элемента одинакова.
что вы также можете сделать? Поместите дополнительный "фиктивный" div перед вашим последним div.
Сделайте его высотой 1 пиксель и шириной, необходимой для покрытия контейнера div / body
Это заставит последний div отображаться под ним, начиная с левого края.