html - この div 内のコンテンツが垂直方向の配置を台無しにするのはなぜですか

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

修正したい場合は、vertical-align を使用してください。

.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 Divに垂直方向の配置を与えることができます

"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;
}

お役に立てれば！