Работа с position:absolute и множественными элементами

Master of Code · September 4, 2008

Други, вновь за помощью спешу к вам.

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

подскажите как быть?

Vlad · September 5, 2008

Не очень понятно из описания, почему элементы начинают двигаться.

Master of Code · September 5, 2008

Не очень понятно из описания, почему элементы начинают двигаться.

под словами начинают двигаться я имел ввиде начинаю их позиционировать, то есть смещать от стартового их положения в ту или иную сторону, с помощью left, right ....

Victor Ananiev · September 5, 2008

а абсолютный ты задаешь всем одинаковый и они едут в кучу, все четко, а что именно надо? можно все это запихнуть в один див, и его двигать, а блокам задать ширину 100% и отступы сверху и снизу.

Vlad · September 5, 2008

Если ты им координаты прописываешь, чего ради они в одну кучу собираются. Короче не понятно, приводи код.

Master of Code · September 5, 2008

И так, ситуация вот первоначальный генерируемый код (во много раз упрощенный, но сути не меняет). Соданные элементы получают размер и параметр обтекания справа:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
.div1 
{
height:150px;
width:150px;
border:1px solid #000000;
float:left;
margin:5px;
}

.div2 
{
height:50px;
width:50px;
border:1px solid #00ff00;
}
-->
</style></head>

<body>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>

</body>
</html>

И так, затем нам нужно внетренный квадрат расположить посередине, добавляем относительное позиционирование. Все бы хорошо, но я получаю вот такой эффект как на втором куске кода в этом моем посте, то есть при динамическом изменении размеров одного блока - http://forum.htmlbook.ru/index.php?showtopic=10122

проблему решает если назначить каждому маленькому блоку абсолютное позиционирование, получается эффект наложения на другие элементы, но это допустимо:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
.div1 
{
height:150px;
width:150px;
border:1px solid #000000;
float:left;
margin:5px;
}

.div2 
{
height:50px;
width:50px;
border:1px solid #00ff00;
position: absolute;

}
-->
</style></head>

<body>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>
<div class="div1"><div class="div2"></div></div>

</body>
</html>

казалось бы, вот оно, счастье, но.... квадрат то нужен посередине, ну мы его и двигаем на 50 пикселей в право добавив в класс div2 left:50px;

не буду постить весь код с одним изменением, просто добавьте в последний смещение на 50 пикселей. причем что самое интересное, блоки собираются в кучку только на одной строке, то есть по горизонтали, по вертикали они нормально располагаются.

вот и вопрос, как быть, может стоит не дивами играться, а в табличку запихнеть? вариант с изменением кода и с выводом в таблицу не проходит по ТЗ, потому как количество элементов на строке должно варьироваться в зависимости от размеров окна

Edited September 5, 2008 by Master of Code

Sign In

Работа с position:absolute и множественными элементами

Question

Master of Code

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Master of Code

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Master of Code

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information