Почему содержание в пределах этого Div завинтить Vertical Alignment

Question

Вы можете увидеть это здесь ...

http://jsfiddle.net/cf9Hu/

<div class="container"> 
     <div class="outer"> 
      <div> 
       Blah 
       <br /> 
       Blah 
      </div> 
      <div class="inner"> 
       x 
      </div> 
     </div> 
     <div class="outer"> 
      <div>Blah</div> 
      <div class="inner"> 
       x 
      </div> 
     </div> 
     <div class="outer"> 
      <div>Blah</div> 
      <div class="inner"> 
       x 
      </div> 
     </div>  
    </div> 

и вот мой CSS ...

.container{ 
    width:100%; 
    text-align:center; 
    border:solid 1px black; 
} 

.outer { 
    width: 100px; 
    height: 100px; 
    background-color: green; 
    display:inline-block; 
    position: relative; 
} 
.inner { 
    position: absolute; 
    right: 0px; 
    bottom: 0px; 
} 

Answer 1

Если вы хотите его исправить, используйте вертикальное выравнивание.

.outer { 
    width: 100px; 
    height: 100px; 
    background-color: green; 
    display: inline-block; 
    position: relative; 
    vertical-align: top; 
} 

Или, вы можете использовать «встроенный стол» для отображения, чтобы получить тот же результат

.outer { 
    width: 100px; 
    height: 100px; 
    background-color: green; 
    display: inline-table; 
    position: relative; 
} 

Answer 2

Вы можете либо дать вертикальное выравнивание для вас Outer Дива

"vertical-align: top; OR vertical-align: bottom;" 

.outer { 
    width: 100px; 
    height: 100px; 
    background-color: green; 
    display:inline-block; 
    position: relative; 
    vertical-align: top; 
} 

или вы может изменить «display: inline-block»; до "float:left;"

.outer { 
    width: 100px; 
    height: 100px; 
    background-color: green; 
    float:left; 
    position: relative; 
} 

Надеюсь, это поможет!