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

如果您要修复它，请使用垂直对齐。

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

或者，您可以使用“inline-table”进行显示以获得相同的结果

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

Answer 2

你可以给你的外层垂直对齐

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

希望这可以帮助！