Question

我正在尝试使用css样式构建html，如下图所示：

我设法使用以下html定位内部div：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div style="background-color: yellow; width: 100px; height: 100px; 
position: relative;">
    <div style="background-color: gray;  position: absolute; 
    top: 8px; left: 8px; right: 8px; bottom: 8px"></div>
</div>
</body>
</html>

但问题是，如果我希望外部div的高度是动态的，它就会停止工作。删除高度值会隐藏外部div。

如何在所有条件下实现这一目标？

Answer 1

不确定你要去哪里。但似乎你想在内部div周围填充？

<div style="background-color: yellow; width: 100px; 
            position: relative; padding: 8px">
<div style="background-color: gray;">Hello</div>

这样，内部div的内容将改变外部div的高度......

Answer 2

宽度'W'是否已知？啊，这有点无关......

好的，你需要做这样的事情（假设你将外部div放在你想要的位置）。：

<div style="float:left; background-color:yellow; width:100px;">
     <div style="background-color:gray; margin:8px;">You need enough content here to push the width out far enough...</div>
</div>

您可能需要将外部div放在另一个外部div中以使定位正确，但外部div必须具有float变量（左侧或右侧 - 无关紧要）。

您可以为这些div添加边框和填充等以适应。整个过程的关键是外部div中存在的浮点值。

Answer 3

如果在相对位置对象中只有绝对位置对象[s]，则必须修复相对位置对象的高度值。

提示。您可以通过javascript更改高度值或定义相对位置对象的min-height（CSS 2+）属性。

动态DIV盒高度与子DIV的中心位置

3 个答案: