请教：两个嵌套的div，如何能让里边的div相对于外面的div四边空10px

gyscs 2008-11-19 09:39:42

我做的代码如下：



<!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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>测试css</title>

</head>

<body>

<div style="position:relative; width:300px; height:200px; border:solid 1px  #000000">

        <div style="position:relative; width:auto; margin:10px;height:auto; border:solid 1px  #FF0000">

        asdfdsaf

        </div>

</div>

</body>

</html>

宽度方向上是自动变在两边空10px的，但是高度上有问题。
我现在假设外面的div的高度为200px,在实际情况中高度是不确定的，所以不能直接设死里面的div的height。
不知道这个css该怎么写。

...全文

261 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

gyscs 2008-11-19

打赏
举报

<div style=" width:auto; margin:10px;height:100%; border:solid 1px #FF0000">
asdfdsaf
</div>
是不行的，里边的div的下面部分会超出外面的div.

840722能详细写一下代码吗？万份感谢。

840722 2008-11-19

打赏
举报

如果元素没有垂直border 或者padding，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。
添加一个padding 或者透明的垂直border，空白边就不再叠加了！

西安风影 2008-11-19

打赏
举报

padding:10px

Cyril_Tam 2008-11-19

打赏
举报

将里面的DIV高度设为100%, 能否满足楼主需要?

<div style=" width:auto; margin:10px;height:100%; border:solid 1px #FF0000">
asdfdsaf
</div>

gyscs 2008-11-19

打赏
举报

因为在应用中外层高度被确实时内层还不存在。

mute_solo 2008-11-19

打赏
举报

设置子层的高度不也是一样。。

gyscs 2008-11-19

打赏
举报

我说的外面的div不确定高度的意思不是让它自适应高度，是在有的业务场影下是300px，有的是200px等等，就是在具体的场景下是有固定高度的。

gyscs 2008-11-19

打赏
举报

我也确实想用子层定高度父层去适应，但是业务场景需要定父层宽度和高度，然后子层去适应。

mute_solo 2008-11-19

打赏
举报

哥们为什么不换个方向思考，设定子层高度，而让父层去适应？
看我的实现：



#lay{

	background:black;

	width:250px;

	height:100%;

	overflow:auto;

}

#innerlay{

  width:auto;

  height:100px;

  margin: 10px 10px;

  background: white;

}

bhbhxy 2008-11-19

打赏
举报

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试css</title>
</head>
<body>
<div style="margin:0 auto; text-align:center; width:auto; height:auto; border:solid

1px #000000">
<div style=" width:auto; margin:10px;height:auto; border:solid 1px #FF0000">
asdfdsaf
</div>
</div>
</body>
</html>

szoe5203 2008-11-19

打赏
举报

就是margin:10px;就可以了
如果不行再试试padding:10px;

magicevy 2008-11-19

打赏
举报

里边层加个margin:10px;就ok

840722 2008-11-19

打赏
举报

Tommy—Tommy的可以实现你要的效果哦~

[Quote=引用 11 楼 csdngeternal 的回复:]
<div style=" width:auto; margin:10px;height:100%; border:solid 1px #FF0000">
asdfdsaf
</div>
是不行的，里边的div的下面部分会超出外面的div.
[/Quote]

这个主要是你在父元素中指定了高度，并在内部的div中设置了height：100%所导致；
应该不难发现显示效果中刚好多出的距离为10px吧~
如果只是想看下空白边叠加效果的话，可以使用
<div id="outer">
<div id="inner">
adaafafassfa
</div>
</div>

设置style为：
#outer {
margin:10px;
background-color:blue;

}
#inner {
margin:20px;
background-color:red;
}

看下效果，然后再在outer里面加个padding:1px;后再看下效果~~

Tommy_Tommy 2008-11-19

打赏
举报



<div style="position:relative; width:300px; height:200px; border:solid 1px  #000000; padding:10px 10px 12px 10px;">

        <div style="width:auto; height:100%; border:solid 1px  #FF0000;">

        asdfdsaf

        </div>

</div>