Html 如何强制容器元素包含水平内容？

下面是我尝试使用的示例：

当

#right

从屏幕右侧伸出时，我需要

#container

展开以适应

#right

。Clearfix似乎不是我尝试过的答案：它只影响垂直内容。

试试这个

#container {
    outline: 1px solid red;
    min-width: 100%;
    height: 50px;
    display:inline-block;
}

试试这个

#container {
    outline: 1px solid red;
    min-width: 100%;
    height: 50px;
    display:inline-block;
}

---

我能够通过几行JQuery实现您需要的功能：

x1=$("#right").width();
x2=$("#left").width();

$("#container").width(x1+x2);

---

我能够通过几行JQuery实现您需要的功能：

x1=$("#right").width();
x2=$("#left").width();

$("#container").width(x1+x2);

---

最简单的方法是将

float:left

添加到

#容器

---

最简单的方法是将

float:left

添加到

#容器中

我不能理解你的问题。你能解释更多吗？@Mohsen:如果你看我链接的JSFIDLE并缩小显示区域，使绿色区域延伸到屏幕外，那么红色轮廓将不会包围它。我想知道。我不明白你的问题。你能解释更多吗？@Mohsen:如果你看我链接的JSFIDLE并缩小显示区域，使绿色区域延伸到屏幕外，那么红色轮廓将不会包围它。我想要它。对不起。。。溢出：自动；将使其工作（但使用滚动条）
display:inline block
确实工作，但请注意，它在IE7中不工作（如果这很重要）。@thirtydot:如果在条件样式表中将其设置为
block
，在IE7中工作吗？@Matthew Scharley:
display:block
是
div
s的默认值，因此，在任何浏览器中设置该选项都不会产生任何影响。通常可以使用
display:inline block使
display:inline block在IE7中工作*显示：内联；zoom:1
，但在本例中，这也不起作用：（
*属性
表示“仅适用于IE7及更低版本”）（如果您在IE中点击F12以打开开发工具并切换到IE7模式，您可以自己进行测试）+1以解决我的实际问题，出于某种原因，这在我的环境中的IE7中起作用。犹豫是否接受，因为对于简单的JSFIDLE案例，它在IE7中不起作用。抱歉。。。溢出：自动；将使其工作（但使用滚动条）
display:inline block
确实工作，但请注意，它在IE7中不工作（如果这很重要）。@thirtydot:如果在条件样式表中将其设置为
block
，在IE7中工作吗？@Matthew Scharley:
display:block
是
div
s的默认值，因此，在任何浏览器中设置该选项都不会产生任何影响。通常可以使用
display:inline block使
display:inline block在IE7中工作*显示：内联；zoom:1
，但在本例中，这也不起作用：（
*属性
表示“仅适用于IE7及更低版本”）（如果您在IE中点击F12以打开开发工具并切换到IE7模式，您可以自己进行测试）+1以解决我的实际问题，出于某种原因，这在我的环境中的IE7中起作用。犹豫是否接受，因为对于简单的JSFIDLE情况，它在IE7中不起作用。