我有以下 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 - 文本 block 应该是一个完整的 100X150 框。
问题是这段代码没有产生预期的效果。外层 div 确实大小正确,但内层 div 似乎只填充了外层 div 顶部的一小块区域。
我还尝试使用 height:inherit 和 width:inherit 而不是指定大小。
最佳答案
问题出在 display:inline
样式上。如果您希望它像普通 DIV 一样运行,请将其保留为 display:block
。如果它是 display:inline
,它只会和继承的行高一样高。
关于html - 如何让内部 div 填充整个包装 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2724734/