10

这是我的小问题(此处的值仅用于示例):

假设我有一个宽度约为 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 背景?

4

2 回答 2

28

添加float: leftdisplay: inline-block.outer

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

添加溢出:隐藏;宽度:100%;向外

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