對齊div與CSS

Question

我有一個div內的幾個div。

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

我想對齊外部div的底部中間的內部div。

要對齊它們在底部我試圖

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

哪些工作，但提出的div在彼此的div之一是不可見的，我怎麼能解決這個問題？以及如何將他們移動到中心？

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唯一與「外部」專區內不會打另一個元素。在容器內，兩個「內部」隔間將像他們通常在其他地方那樣定位自己。

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