定位多个嵌套的div相对于彼此

我有一个外部div，外部div内的div和这些div内部的div。我想把最里面的div分配给它的父节点，中间节点分隔它的父节点，即最外面的div。对于div中的div，我们可以使用parent div的相对位置和child 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

嗯，但是如果你事先不知道最内层的div是多大，那么让它们定位绝对有意义吗？ –

设置最外层的父position: relative，然后将所有的水平，以position: absolute;

内的div可以相对于绝对元件定位到一个绝对父，那里没有问题。

下面是一个例子：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

中添加的代码。由于大多数元素没有高度，因此您的示例不太好解释问题，因此您无法真正了解它是如何工作的。我已经发布了我的意思的示例代码，以便您可以在行动中清楚地看到它。 –

对我而言，div的高度在手之前是未知的，在这种情况下可以做些什么？ – 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相对于彼此

回答

相关问题