根据子宽度扩展div宽度

Here is my little problem (the value are just here for the example):

这是我的小问题(这里的值只是示例):

Lets say I have a window with a width around 500px. Inside my document, I have an outer div with no specified width, but the following css:

假设我有一个宽度约为500px的窗口。在我的文档中,我有一个没有指定宽度的外部div,但是下面的css:

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

Inside this div are 3 other div that have the following properties:

在这个div里面是另外3个具有以下属性的div:

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

(notice the width of 400px. That's where the problem is, the line is wider than the window, and the outer div does not extend. The HTML looks like that:

(注意400px的宽度。这就是问题所在,线条宽于窗口,外部div不会延伸.HTML看起来像这样:

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

What I'm trying to achieve is to have the 3 inner div with a blue background, without setting it for the t1 class. What this example will produce is a blue background limited to the width of the window.

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

See full example here : http://jsfiddle.net/sjCTR/ (you'll have to adapt the bottom left corner if your screen is to large)

请参阅此处的完整示例:http://jsfiddle.net/sjCTR/(如果您的屏幕很大,则必须调整左下角)

I'm wondering if somehow that could be achieved thru css/html only, without setting the outer div width/the inner div background?

我想知道是否可以通过css / html实现,不设置外部div宽度/内部div背景?

2 个解决方案

#1

Add float: left or display: inline-block to .outer.

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

#2

add overflow: hidden; width:100%; to outer

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

#1