Question

我有一个显示：div的div。在它里面，我有另一个div显示：inline-block。当我测量包含div的大小时，不考虑子边界。它在浏览器的检查器中很容易看到。有没有办法拉伸包含div，使其边界包含内联块的边界？

以下是演示此问题的代码：

<div style="display: inline">
  <div style="display: inline">aaa</div>
  <div style="display: inline-block; width: 100px; height: 100px; background: red"></div>
</div>

P.S。我无法将容器内联更改为内联块。我唯一能改变的是内联块div的属性。

Answer 1

您可以在容器div上应用display: table;。这是一个有效的fiddle。

Answer 2

将height和width设为auto

  <div style="display: inline-block; background-color:green;width:auto; height:auto;">
  <div>aaa</div>                                            ^^^^^^^^^^^^^^^^^^^^^^^^
    <div style="width: 100px; height: 100px; background: red;opacity:0.5;"></div>
</div>

Answer 3

您可以将内容包装在div中，并为其赋值display: block;

DEMO http://jsfiddle.net/kevinPHPkevin/649EB/

CSS

.container {
    background: #ccc;
}
.inner {
    display: block;
    background: #000;
}

HTML

<div class="container" style="display: inline">
    <div class="inner">
        <div style="display: inline">aaa</div>
        <div style="display: inline-block; width: 100px; height: 100px; background: red"></div>
    </div>
</div>

EDITED

如果您可以使用display: block;，那么我会将其设置为height: auto;

[更新] DEMO http://jsfiddle.net/kevinPHPkevin/649EB/1/

如何测量包括儿童在内的div大小

3 个答案: