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

I am trying to build the html with css styling schematically presented in the picture below: alt text http://www.freeimagehosting.net/uploads/216e5750a8.png

我正在尝试使用css样式构建html,如下图所示:alt text http://www.freeimagehosting.net/uploads/216e5750a8.png

I manage to position the inner div with the following 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>

but the problem is that it stops to work if I want the height of outer div to be dynamic. Removing height value hides outer div.

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

How that could be achieved under all conditions?

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

3 个解决方案

#1

Is width 'W' known? Ah, it is somewhat irrelevant...

宽度'W'是否已知?啊,这有点无关紧要......

OK, you need to do something like this (assuming you position the outer div where you want it). :

好的,你需要做这样的事情(假设你将外部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>

You may need to place the outside div in a further outside div to get the positioning correct, but the outside div must have a the float variable (left or right - it doesn't matter).

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

You can add borders and padding etc to these divs to suit. The key to the whole process is the float value existing in the outer div.

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

#2

Not really sure where you're going with this. But it seems you want to just have padding around the inner div?

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

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

This way, the content of the inner div will alter the height of the outer div...

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

#3

If you have only absolute position object[s] in Relative position object, you must fix height value of Relative position object.

如果在相对位置对象中只有绝对位置对象[s],则必须固定相对位置对象的高度值。

Hint. You can change height value via javascript or define min-height(CSS 2+) property of relative position object.

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

#1