防止嵌套的 DIV 换行（不指定父宽度）答案

【问题标题】：Preventing nested DIVs to wrap (without specifying parent width)防止嵌套的 DIV 换行（不指定父宽度）
【发布时间】：2009-08-31 15:58:52
【问题描述】：

在下面的代码中，我有 2 个 div，每个都有两个嵌套的 div。当浏览器窗口在 Firefox/IE8 下重新调整大小时，一切正常 - 最右边的父 div 落在第一个下面。

在 IE6（或兼容模式的 IE8）下，子 div 在第二个 div 包装中。更糟糕的是，尽管我为 div 设置了最大高度，但它还是发生了。

在这种情况下，如何让 IE6 表现得像 IE8/Firefox？如何告诉 DIV 不要换行？请注意，文本是动态的，因此我无法将宽度设置为父级。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.parent
{
float: left;
border: solid 1px black;
height: 30px;
white-space: nowrap;
}

.child
{
float: left;
border: solid 1px grey;
width: auto;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<div class="parent">
<div class="child">
What is up, guy What is up, guy
</div>
<div class="child">
What is up, guy What is up, guy
</div>
</div>
<div class="parent">
<div class="child">
What is up, guy What is up, guy
</div>
<div class="child">
What is up, guy What is up, guy
</div>
</div>
</form>
</body>
</html>

【问题讨论】：

IE6 不支持最大高度，一方面
即使“身高”有效，我也会很高兴。

标签： css internet-explorer html

【解决方案1】：

您可以使用条件 cmets 让 IE 使用 height，并在其他任何地方使用 max-height。

<link rel="stylesheet" type="text/css" href="path/to/stylesheet" />

<!--[if IE 6]>
<style type="text/css">
.parent {
  height: 30px;
}
</style>
<![endif]-->

【讨论】：

它不起作用。即使我只是在其中输入“高度”（无条件），它仍然会忽略高度。

【解决方案2】：

为什么不以百分比指定宽度？这应该使它在没有包装的情况下像你想要的那样扩展和收缩。

【讨论】：

我无法指定百分比，因为在我的布局中有未知数量的父框，我不知道它们的相对宽度和固定宽度。但是，它会解决问题。

【解决方案3】：

正如DocType回复我的那样：

.child {
    display:inline;
    border: solid 1px grey;
    width: auto;}

在 IE6 和 FF3.5 中运行良好

发生这种情况是因为 div 不再是浮动的块级元素，但它们现在是内联元素。根据您的目标，这可能是也可能不是一个好的答案。

我认为问题的根源在于 IE6 对“white-space: nowrap”的“理解”。在 IE6 的情况下，它只适用于内联元素。

【讨论】：

你能在你的答案中添加更多细节吗？照原样，它只是一个链接，链接如何回答问题并不是很明显。