Question

我希望parent-div（红色）与绿色的child-div一起成长。现在它只停在视口处。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>simple document</title>
<style type="text/css">
 * {
  font-family: verdana;
  margin: 0px;
  padding: 0px;
 }
</style>
</head>
<body>
<div style="margin: 30px; background: red; padding: 10px;">
 <div style="background: green; width: 2000px;">dxyf</div>
</div>
</body>
</html>

我不想使用display：table;因为它在IE中不能很好地工作。

有什么想法吗？

Answer 1

在父display: inline-block;上使用<div>，它将按预期工作

Answer 2

使父div浮动：左;它将根据需要进行扩展。

Answer 3

我知道我迟到了，但这就是我要解决问题的方法：

在底部添加清除INSIDE的父级，并使父级溢出：隐藏。

以下是修改后的代码：

.clear{
    clear: both;
    /* make sure there is no height set to it */
    line-height: 0;
    height: 0;
    font-size: 0em;
}

<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;">
 <div style="background: green; width: 2000px;">dxyf</div>
 <div class="clear">/div>
</div>

适用于FF3和IE7，但未在其他浏览器中测试过。

希望至少能帮助解决你的问题。

Answer 4

使用display：table;在父div上。或者您可以将父div放入表格的单元格中。

Answer 5

这里有太多复杂的建议。这里有一个提示：不要修改表格单元格，以及清除和浮动，只需确保孩子的边框等于您正在寻找父级的填充。边界总是被吸引到外面，所以它会做你想要的。

这应该有用......

<div style="margin: 30px; background: red;">
 <div style="background: green; width: 2000px; border: 10px red solid">dxyf</div>
</div>

...在所有浏览器中，没有问题。 HTH。

Answer 6

请参阅quirksmode.org的this solution。这很简单，只需将此类应用于容器/父div：

div.container {
    overflow: hidden;
    width: 100%;
}

Answer 7

将父亲的位置设为亲属，将子女设为绝对

CSS：Parent-Div不与它的孩子一起成长（水平）

7 个答案: