형제 div의 높이를 알지 않고 형제 div의 아래쪽에 div를 맞 춥니 다.

형제 div의 높이를 알지 못해 형제 div의 아래쪽에 div를 정렬하려고합니다. 다음은 내가 작업하고있는 레이아웃입니다 : http://abbymilberg.com/sample-layout.html.형제 div의 높이를 알지 않고 형제 div의 아래쪽에 div를 맞 춥니 다.

마지막 div 프로젝트의 내용이 동적이 될 것이므로 상단 div에서 하드 코딩하지 않고 오른쪽 div를 왼쪽 div의 하단에 정렬하려고합니다. 높이가 끊임없이 변할 것입니다.

CSS로이 작업을 수행하는 방법을 모르겠습니다. 거기에 javascript를 사용하여 요소의 높이를 얻을 수있는 방법이있을 것 같아요,하지만 아무것도 작동하도록 열려 있습니다.

<head> 

    <style type="text/css"> 

     #body{text-align:center; margin:0px;} 

     #wrapper{border:solid 1px; margin:10px auto 10px; width:800px; 
     padding:10px; text-align:left; } 

     #left{margin-right:160px; border:solid 1px;} 

     #right{float:right; border:solid 1px; width:150px;} 

    </style> 

</head> 

<body> 

    <div id="wrapper"> 

     <div id="right"> 
      <h2>Right</h2> 
     </div> 

     <div id="left"> 
      <h2>Left</h2> 
     </div> 

    </div> 

</body> 

</html>

출처

2012-11-11 Anonymous

사용 절대 및 상대 위치 :

#wrapper { 
    position: relative; 
} 

#right { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
}

Demo

출처

2012-11-11 21:14:29 bookcasey

감사합니다! 나는 그것을 시도했지만 Dreamweaver에서 미리보기가 틀림없이 ... 모든 브라우저에서 작동합니다. –

축하합니다. 따라서 Dreamweaver가 코드 편집 모드에서 자동 완성되는 것 외에는 절대 믿지 않는 이유는 무엇입니까? –

형제 div의 높이를 알지 않고 형제 div의 아래쪽에 div를 맞 춥니 다.

답변

관련 문제