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

时间:2013-05-29 08:34:51

标签: css

我有一个外部div,div在div外部,div也在这些div中。我想将最里面的div wrt定位到它的父级,将中间级别的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>

2 个答案:

答案 0 :(得分:5)

将最外层的父级设置为position: relative,然后将所有级别的内部div设置为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>

答案 1 :(得分:1)

疯狂的问题。你可以使用嵌套在一起的无序列表吗?

如果您在父容器中设置它,那么如果您的页面的其余部分需要,则可以绝对确定父级的大小和位置,但是您可以浮动要水平放置的行项目而不浮动那些你想垂直排队。请记住,浮动的项目需要具有位置:相对和指定的宽度。

<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标签更容易阅读和维护,并且在语义上更正确。