whitespace - 根据子级宽度扩展 div 宽度

Question

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

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

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

在这个 div 中还有 3 个其他 div，它们具有以下属性：

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

（注意 . 的宽度400px。这就是问题所在，线比窗口宽，并且外部 div 没有延伸。HTML 看起来像这样：

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

我想要实现的是让 3 个内部 div 具有蓝色背景，而不为t1类设置它。这个例子将产生一个蓝色背景，限制在窗口的宽度。

在此处查看完整示例：http: //jsfiddle.net/sjCTR/（如果您的屏幕太大，您必须调整左下角）

我想知道是否可以仅通过 css/html 以某种方式实现，而无需设置外部 div 宽度/内部 div 背景？

score 28 · Accepted Answer

28

于 2012-04-08T23:28:47.407 回答

score 0 · Accepted Answer

0

添加溢出：隐藏；宽度：100%；向外

于 2012-04-08T23:45:59.400 回答

2 回答 2