다른 div의 맨 아래에 div가 있습니다

div 상자를 배치하여 (예 : 이미지를 넣고 싶을 때) 중앙 하단의 다른 div 상단에 어떻게 나타나는지 궁금합니다. 둘 다 된 div의 정확한 좌표가 있다면 정말 쉽게다른 div의 맨 아래에 div가 있습니다

<html> 
<body> 
<style type="text/css"> 
.outer { 
    width: 350px; 
    height: 350px; 
} 

.inner { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 
</style> 
<div class="outer"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque, neque ut ultrices posuere, velit arcu aliquam dui, id rutrum justo leo nec purus. Donec aliquet justo a est iaculis id porta nulla pulvinar. Proin quis turpis vitae augue volutpat volutpat. Donec volutpat accumsan urna, id vulputate augue euismod eu. In vitae libero tortor. Integer lacinia, turpis vel egestas ornare, nisi libero tempus orci, non imperdiet erat nulla malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
    <div class="inner"></div> 
</div> 
</body> 
</html>

출처

2012-06-26 fakeguybrushthreepwood

작동 내측 DIV에 절대 위치 및 자동 마진의 조합. 그것은 당신이 원하는대로 당신 된 div를 넣어 도움이 될 것입니다 jsfiddle

: 당신은 또한 그런 일을 시도 외부 DIV

.outer { 
    width: 350px; 
    height: 350px; 
    position: relative; 
    border: 1px solid black; 
} 

.inner { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; /* both left AND right must be set to 0 */ 
    margin: 0 auto; 
}

jsFiddle DEMO

출처

2012-06-26 19:16:09 jackwanders

enter image description here

다음 코드를하려합니다. 당신의 exemple에서

단순히 그런

position: relative; 
top: 250px; 
left: 125px;

또는 무언가를 넣고 그 트릭을 할 것입니다.

출처

2012-06-26 19:09:19

.outer { 
    width: 350px; 
    height: 350px; 
    position:relative; 
    border: 1px #bbb solid; 
} 

.inner { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position:absolute; 
    left: 130px; 
    bottom:0; 
}

DEMO

출처

2012-06-26 19:13:30 Dev

픽셀 값으로 위치를 지정하려면 '왼쪽 : 125px' (350-100)/2 = 125이어야합니다. 그러나 임의의 크기의 요소에 대해 중앙에 배치 할 수있는 방법이 있습니다. – jackwanders

에 대해 상대적으로 위치를 설정해야합니다.

.outer { 
    width: 350px; 
    height: 350px; 
    position: relative; 
    background-color: yellow; 
} 

.inner { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    margin-left: -50px; 
}

분명히하기 위해 외부 div에 배경을 추가했습니다.

출처

2012-06-26 19:17:07 Xella

#outer { 
    width: 350px; 
    height: 350px; 
    position: relative; 
    z-index: 1; 
} 

#inner { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    bottom: 0px; 
    left: 110px; 
    z-index: 2; 
}

출처

2012-06-26 19:32:45 Cleverbot

다른 div의 맨 아래에 div가 있습니다

답변

관련 문제