Позиционирование нескольких вложенных div друг относительно друга

У меня есть внешний div, divs внутри внешнего div и divs внутри этих divs тоже. Я хочу расположить самый внутренний div по отношению к его родительскому, div среднего уровня к его родительскому элементу, то есть к внешнему div. Для просто div внутри div мы достигаем этого, используя относительное позиционирование для родительского div и абсолютное позиционирование для дочерних div. Но как мы достигаем этого, когда у нас больше уровней вложенных div?Позиционирование нескольких вложенных div друг относительно друга

Я хочу иметь предопределенную ширину для самых внутренних делений уровня, а другие более высокие уровни div должны иметь ширину и высоту, чтобы они соответствовали их дочерним div. У меня есть следующий код, но он не работает. Код показан ниже:

<div class='list' id='list1' style='padding: 1px; border : 5px groove; position: relative; min-width: 3px; width: auto; min-height: 3px; height: auto;' > 
<div class='tuple tuple1' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' > 
    <div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' >adasd</div> 
    <div class='elmnt elmnt2' id='elmnt2' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' >asdasd</div> 
    <div class='elmnt elmnt3' id='elmnt3' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' >asdasd</div> 
    <div class='elmnt elmnt4' id='elmnt4' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' >sadasd</div> 
</div> 
<div class='tuple tuple2' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' > 
    <div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' >adasd</div> 
      <div class='elmnt elmnt2' id='elmnt6' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' >asdasd</div> 
    <div class='elmnt elmnt3' id='elmnt7' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' >asdasd</div> 
    <div class='elmnt elmnt4' id='elmnt8' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' >sadasd</div> 
</div> 
<div class='tuple tuple3' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' > 
    <div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' >adasd</div> 
    <div class='elmnt elmnt2' id='elmnt10' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' >asdasd</div> 
    <div class='elmnt elmnt3' id='elmnt11' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' >asdasd</div> 
    <div class='elmnt elmnt4' id='elmnt12' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' >sadasd</div> 
</div>

источник

2013-05-29 user1628340

С какими проблемами вы сталкиваетесь? –

Посмотрите на изменения в вопросе и на код – user1628340

Хм, но если вы не знаете заранее, какие размеры будут иметь самые внутренние divs, имеет ли смысл иметь их положение абсолютно? –

Установите крайний родитель position: relative, а затем внутренние див всех уровней к position: absolute;

можно расположить абсолютный элемент по отношению к абсолютному родителю , поэтому проблем нет.

Вот пример: http://codepen.io/pageaffairs/pen/dzkAF

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

.one {position: relative; background: red; width: 200px; height: 200px;} 

.two {position: absolute; background: blue; width: 80px; height: 80px; top: 20px; left: 30px;} 

.three {position: absolute; background: green; width: 50px; height: 50px; top: 10px; left: 50px;} 

</style> 

</head> 
<body> 

<div class="one"> 
    <div class="two"> 
     <div class="three"> 
     </div> 
    </div> 
</div> 

</body> 
</html>

Вот пример с высоты не установлен, но с содержанием добавил:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

.one {position: relative; background: red; width: 200px;} 

.two {position: absolute; background: blue; width: 300px; top: 20px; left: 30px;} 

.three {position: absolute; background: green; width: 400px; top: 10px; left: 50px;} 

</style> 

</head> 
<body> 

<div class="one"> 
    Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content 
    <div class="two"> 
    Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content 
     <div class="three"> 
     Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content 
     </div> 
    </div> 
</div> 

</body> 
</html>

источник

2013-05-29 08:42:18

, похоже, не работает. пожалуйста, посмотрите код, который я добавил в вопрос – user1628340

. Ваш пример не очень хорош для иллюстрации проблемы, так как большинство элементов не имеют высоты, поэтому вы не можете увидеть, как это работает. Я опубликовал пример кода, что я имею в виду, чтобы вы могли ясно видеть его в действии. –

Для моего случая, высоты divs не известны заранее, что можно сделать в этом случае? – user1628340

Сумасшедший вопрос. Можете ли вы использовать неупорядоченные списки, вложенные вместе?

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

<div id="parentContainer"> 
<ul style="list-style-type:none;"> 
    <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 1</li> 
    <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 2</li> 
    <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 3 
    <ul style="list-style-type:none;"> 
     <li>subitem a</li> 
     <li>subitem b</li> 
    </ul></li> 
    <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 4</li> 
</ul> 
</div>

Я считаю, что это легче читать и поддерживать, чем кучу вложенных DIV тегов, а также быть более семантически правильно.

источник

2013-06-03 14:02:03 ph33nyx

Позиционирование нескольких вложенных div друг относительно друга

ответ

Смежные вопросы