2

I have an outer div, divs inside the outer div and divs inside these divs too. I want to position the innermost div wrt to its parent, the middle level div wrt to its parent i.e. outermost div. For just divs inside a div we ca achieve this using relative positioning for the parent div and absolute positioning for child divs. But how do we achieve it when we have more levels of nested divs?

I want to have predefined width for the innermost level divs and the other higher level divs should have their width and height to just fit their child divs. I have the following code, but it does not seem to work. The code is shown below:

<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>

4

2 回答 2

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>
于 2013-05-29T08:42:18.513 回答
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 标签更易于阅读和维护，并且在语义上更正确。

于 2013-06-03T14:02:03.187 回答