0

我有一个具有 display: block 的 div。在其中，我有另一个带有 display: inline-block 的 div。当我测量包含 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>

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

4

3 回答 3

3

您可以display: table;在容器 div 上应用。这是一个工作小提琴。

于 2013-06-01T08:22:13.867 回答
1

设置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>
于 2013-06-01T08:29:59.383 回答
1

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

演示 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>

已编辑

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

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

于 2013-06-01T08:44:21.500 回答