размер div'a в зависимости от расположения div'ов в нем
Надо чтобы div "telo" растягивался в зависимости от дивов которые находятся в нем. тоесть должен быть черный квадрат в котором по углам будут маленькие зеленые.
Сейчас квадраты box на своих местах, а вот дива "telo" не видно Помогите пожалуйста.
<style>
#box{
width:50px; height:50px; background-color:#090; position: absolute;
}
</style>
<div id="telo" style="background-color: #000; position: absolute; top:600px; left:0px; width: auto; height:auto;">
<div id="box" style="top:0px; left:0px;"></div>
<div id="box" style="top:100px; left:200px;"></div>
</div>
|
Во-первых, не давайте нескольким элементам одинаковые id. Используйте для этого атрибут class.
Во-вторых, абсолютно позиционированные элементы вырваны из нормального потока и не будут растягивать своего родителя. Если нужно, чтобы родитель тянулся за дочерними, оставьте детей в нормальном потоке и двигайте их посредством CSS-свойства margin.
<style type="text/css">
.box{
width:50px; height:50px; background-color:#090;
}
</style>
<div id="telo" style="background-color: #000; position: absolute; top:600px; left:0px; width: auto; height:auto;">
<div class="box" style="margin-top:0px; margin-left:0px;"></div>
<div class="box" style="margin-top:100px; margin-left:200px;"></div>
</div>
|
да, все работает на ура, спасибо большое!
|
надо так чтобы была возможность добалять новые box'ы причем что в любых местах
сейчас так: box'ы на своих местах, но map не растянулся...
<style>
.box{
width:50px;
height:50px;
background-color:#090;
position:absolute;
}
.map{
background-color: #ccc;
position: relative;
top:100px;
left:100px;
width:auto;
height:auto;
}
</style>
<div id="map" class="map">
<div id="box1" class="box" style="top:0px; left:0px;"></div>
<div id="box2" class="box" style="top:550px; left:550px;"></div>
<div id="box4" class="box" style="top:250px; left:250px;"></div>
</div>
|
Jekel, тебе же уже написали
Цитата:
И у map не обязательно использовать класс, хватит и ИД... ;) |
Jekel, возможно вам поможет следующая статья:
http://www.quirksmode.org/css/clearing.html |
| Часовой пояс GMT +3, время: 00:16. |