div와 CSS를 정렬

Question

div 안에 몇 개의 div가 있습니다.

<div class="outside"> 
    <div class="inside"></div> 
    <div class="inside></div> 
</div> 

외부 div의 하단 중앙에 내부 div를 정렬하려고합니다.

바닥에 그들을 정렬하려면이 나는이 문제를 해결할 수있는 방법,

작동하지만 그렇게 된 div 중 하나가 볼 수 없습니다 서로에 걸쳐있는 div를두고

.outside { position:relative;} .inside { bottom:0px; position:absolute; }

를 시도? 어떻게 센터로 이동할 수 있습니까?

Answer 1

당신이 position: absolute를 사용하기 시작하면, 당신은 정기적으로 documentflow에서 이러한 요소를 제거하고 ~하지 않을 것이다 배치 계산, 줄 바꿈, 부유 계산 등을 위해 계산됩니다. 나머지 채움에 관한 한 기본적으로 자신의 작은 우주에서 벗어났습니다. 두 개의 "내부"div가 서로 겹치지 않게하려면 다른 div에 배치하고 새 div를 배치 한 다음 원본 컨테이너를 새 컨테이너 내에서 정상적으로 배치하게해야합니다.

<style type="text/css"> 
    .outside { position: relative } 
    .container { position: absolute; bottom: 0 } 
    .inside { ... } 
</style> 

<div class="outside"> 
    <div class="container"> 
     <div class="inside">lorem</div> 
     <div class="inside">ipsum</div> 
    </div> 
</div> 

이 방법은, 컨테이너는 position: absolute에 의해 영향을받는 유일한 방법이며, '외부'사업부 내의 다른 요소 싸움을하지 않습니다. 그리고 컨테이너 내에서 두 개의 "내부"div는 일반적으로 다른 곳과 마찬가지로 스스로 위치를 결정합니다.

Answer 2

.outside{ 
    position:relative; 
    background-color: #000; 
    height: 100px; 
    text-align: center; 
} 
.inside{ 
    height: 30px; 
    position:absolute; 
    background-color: #fff; 
    width: 50%; 
    margin: 0px auto; 
    bottom: 0px; 
    left: 25%; 
} 
.inside_top{ 
    bottom: 30px; 
} 

<div class="outside"> 
    <div class="inside inside_top"><p>Some content</p></div> 
    <div class="inside"><p>Some content</p></div> 
</div> 

Fiddle

Answer 3

이 답변을 확인하시기 바랍니다

CSS

.outside {height:200px; border:1px solid red; position:relative;} 
.inside-1 { 
    height: 10px; 
    width: 20px; 
    border: 1px solid black; 
    position:absolute; 
    bottom:0; 
    left:50%; 
    margin-left: -20px; 
} 

Working Demo