2

私は外側のdiv、外側のdivの内側のdiv、およびこれらのdivの内側のdivも持っています。最も内側の 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>

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

クレイジーな質問。代わりに、入れ子になった順序なしリストを使用できますか?

親コンテナー内に設定する場合、ページの残りの部分で必要な場合は、その親のサイズと位置を絶対的に変更できますが、水平に配置したい項目をフロートさせ、必要な項目をフロートさせないようにすることができます。縦に並びます。浮動アイテムには position:relative と width を指定する必要があることを覚えておいてください。

<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 に答える