Question

你可以在这里看到......

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

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

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

希望这有帮助！

为什么此内容中的内容会使垂直对齐变得复杂

2 个答案: