Html 使外部div的宽度自动适合内部div

在一个外div中有两个内div，我想使外div自动适应内div的宽度。可能吗

正文{
字号：0；
}
#外{
边框：1px纯黑；
}
.内部{
字体大小：12px；
显示：内联块；
边框：1px纯红；
}

文本1
文本2

您的

outer

div是块级元素。您需要使其成为内联级别的元素<代码>内联元素自动采用其包含内容的大小。就您提出的问题而言，只需设置：

display: inline-block

在你的外侧div上就可以了。有关演示，请参见下面的代码片段：

正文{
字号：0；
}
#外{
边框：1px纯黑；
显示：内联块；
}
.内部{
字体大小：12px；
显示：内联块；
边框：1px纯红；
}

文本1
文本2

将“显示：表格”添加到#外部css：

例如：

#outer {
    border: 1px solid black;
    display: table;
}

---

如果您添加

位置：绝对值，则使用display:table与使用inline相比不那么麻烦或<代码>浮动：左侧

到

#外部

它的大小将与两个内部div相匹配。对于本例，我将使用

浮点值

<代码>浮动通常更适合于随着时间的推移可能随编辑而更改或扩展/收缩的内容，而

绝对定位

应在文档流或文档结构之外使用，如导航栏

编辑：如果您不需要其他元素围绕外部

div

流动，下面发布的

display:inline block

方法将起作用，但是如果您有元素想要围绕

#外部

流动，则

float:left

将是一种方法。假设您将

#outer

作为宽度的50%，并希望使用

显示在页面的另一半上有其他内容：inline block

将其他元素放置在

#outer

下面

---

但是当空间不够时，内部div会绕成两行，那么外部div会比内部div大。这是如何改变的？5年后，这是最好的答案，我试图在表的td元素内修复一些绝对定位的工具提示，但它们没有扩展到td宽度。现在，我们是完美的。