Question

我有以下HTML代码：

<div class="outer ui-draggable" style="position: relative;">
  <div class="inner">Foo bar</div>
</div>

使用这个CSS：

.outer
{
    background-color: #F7F085;
    margin: 5px;
    height: 100px;
    width: 150px;
    text-align:center;
    vertical-align:text-bottom;
}
.outer .inner
{
    display:inline;
    vertical-align:middle;
    height: 100px;
    width: 150px;
}

我希望内部div完全填充外部div - 文本块应该是一个完整的100X150盒。

问题是此代码不会产生预期效果。外部div确实是正确的大小，但内部div似乎只填充外部div顶部的一个小区域。

我也尝试过使用height：inherit和width：inherit而不是指定大小。

Answer 1

问题在于display:inline风格。如果您希望它的行为与普通DIV一样，请保持display:block。如果它是display:inline，它只会与继承的行高一样高。

Answer 2

可能是因为vertical-align样式属性。这是一个无效的样式规则。它仅适用于<tr> <td>和<div>并且显示：table-cell

如何让内部div填充整个包装div？

2 个答案: