根据子元素的宽度扩展div宽度

Question

这里是我的小问题（值仅用于示例）：

假设我有一个宽度约为500px的窗口。 在我的文档中，我有一个外部div没有指定宽度，但具有以下CSS：

.outer{
  white-space:nowrap;
  background:blue;
}

这个 div 里面有 3 个其他的 div，它们具有以下属性：

.t1{
  display:inline-block;
  width:400px;
}

（请注意400px的宽度。这就是问题所在，行宽超过了窗口大小，外部div没有扩展。

<div class="outer">
    <div class="t1">1</div>
    <div class="t1">2</div>
    <div class="t1">3</div>
</div>

我想要实现的是让内部的三个

元素具有蓝色背景，而不需要为类设置背景。当前的例子将产生一个仅限于窗口宽度的蓝色背景。

完整的示例请查看这里：http://jsfiddle.net/sjCTR/（如果您的屏幕太大，则需要适应左下角）

我想知道是否可以只通过CSS / HTML来实现这一点，而不需要设置外部

元素的宽度或内部

元素的背景颜色？

- Py.

---

我不确定我理解你的问题。你是想强制每个.t1的宽度始终为400像素还是始终为33%或其他什么？ - Godwin

不，我在这里放置的数字仅供参考。问题更加复杂，但思路是外部 div 的宽度不会随其子元素的宽度而增长。 - Py.

Answer 1

在.outer中添加float: left或display: inline-block。

- thirtydot

---

非常感谢。两个都有效。你能解释一下这是如何可能的吗？（我的意思是为什么在外面添加它会使其扩展） - Py.

你让我免去了数小时的头痛。 - Bruce

Answer 2

在外层div中添加overflow: hidden; width:100%;

- Ray

Answer 3

为了解释@thirtydot的答案，

Div是块级元素：

块级元素总是从新行开始，并占据整个可用宽度（尽可能向左和右拉伸）。

所以默认情况下，父容器的宽度为100%。如果将其更改为inline-block或inline，则可以获得所需的效果。

内联元素不会在新行上开始，仅占用必要的宽度。

- GLHF