Question

当内容大于div时，我需要有一个div拉伸来包含内容，即使内容超出了html页面的宽度。

示例HTML：

<body>
    <div id="outerDiv">
        <div id="innerDiv">asdfasdfkjasdflkjasldkfalsdkfjalsdkflaskdjfaslkdjfkalsjdhfkasjdhkljsdfashdjsdkjasfkjakfjhskdjfhakjdhkasjdhfsjdkashasjhkajsdkashkashfkajsdlfkjaskdjfhaksdjlaskjdkjdfhkasjdkajndckasjdbcjhsadcjkhasbdfhasbfjkasbdkjfnasdkcsdjfnaksjdfbaksdhfiweuhfjskdbfasjdfnasdfasdfasf
        </div>
    </div>
</body>

示例CSS：

#outerDiv
{
    background-color: red;
}

#innerDiv
{
    background-color: blue;
}

我在这里有一个例子：http://jsfiddle.net/978ew1jz/4/

我希望蓝色div能够延伸到文本的长度。

编辑：当蓝色div延伸时，我还需要红色div仍然围绕蓝色div。

Answer 1

将您的#outerDiv CSS更改为

#outerDiv
{
  background-color: red;
  display:inline-block;
  width: auto;
}

它将根据内容进行扩展。

修改

这是Fiddle。您的red div将使用blue div延伸。

要求div展开以包含甚至大于页面宽度的内容

1 个答案: