Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   размер div'a в зависимости от расположения div'ов в нем (https://javascript.ru/forum/xhtml-html-css/14426-razmer-div%27-v-zavisimosti-ot-raspolozheniya-div%27ov-v-nem.html)

Jekel 16.01.2011 10:15

размер 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>

Amphiluke 16.01.2011 13:19

Во-первых, не давайте нескольким элементам одинаковые 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>

Jekel 16.01.2011 13:29

да, все работает на ура, спасибо большое!

Jekel 17.01.2011 02:10

надо так чтобы была возможность добалять новые 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>

ksa 17.01.2011 08:32

Jekel, тебе же уже написали
Цитата:

Сообщение от Amphiluke
абсолютно позиционированные элементы вырваны из нормального потока и не будут растягивать своего родителя
Если нужно, чтобы родитель тянулся за дочерними, оставьте детей в нормальном потоке и двигайте их посредством CSS-свойства margin.


И у map не обязательно использовать класс, хватит и ИД... ;)

Kepa 23.01.2011 08:08

Jekel, возможно вам поможет следующая статья:
http://www.quirksmode.org/css/clearing.html


Часовой пояс GMT +3, время: 02:39.