서로 중첩 된 여러 div 위치 지정

외부 div가 있고 외부 div 안에 div가 있고이 div 내부에도 div가 있습니다. 가장 안쪽의 div wrt를 부모로, 중간 레벨 div를 부모, 즉 가장 바깥 쪽 div에 배치하고 싶습니다. div 내부의 div의 경우 부모 div의 상대 위치 지정과 하위 div의 절대 위치 지정을 사용하여이 작업을 수행 할 수 있습니다. 하지만 중첩 된 div의 수준이 더 높을 때 어떻게 달성 할 수 있습니까?서로 중첩 된 여러 div 위치 지정

가장 안쪽의 div에 미리 정의 된 너비가 있고 다른 상위 div는 너비와 높이가 자신의 하위 div에 적합해야합니다. 다음 코드는 있지만 작동하지 않는 것 같습니다. position: relative로 설정

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

대부분의 요소에는 높이가 없으므로이 예제를 사용하는 것이 좋지 않으므로 실제로 어떻게 작동하는지 볼 수는 없습니다. 내가 의미하는 바의 예제 코드를 게시 했으므로이를 실제로 명확하게 볼 수 있습니다. –

제 경우에는 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 위치 지정

답변

관련 문제