0

我有两个 div 的简单任务。我需要两者都有彩色边框，并且内部 div 必须使用所有空间。这是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
   .d1{ width:150px;height:150px;border:solid 10px black;background:red;}
   .d2{ height:100%; width:100%; border:solid 20px blue; background:green;}
</style>
</head>
<body>
   <div class=d1>
       <div class=d2>some text</div>
   </div>
</body>
</html>

但是浏览器（IE、Chrome）没有发现我设置了边框和“div”以显示工件。

有人抓住这个错误吗？

4

5 回答 5

1

改为这样做：

<style type='text/css'>
    .d1{ width:110px;height:110px;border:solid 10px black;background:blue; padding: 20px;}
    .d2{ height:100%; width:100%; background:green;}​
</style>

我认为这会给你带来你想要的效果，基本上是通过在 .d1 上使用背景颜色来替换 .d2 上的边框，在 .d1 上添加填充以充当各种边框。

如果您向 .d2 添加任何边距或填充，它将添加到 100% 的高度和宽度值，这意​​味着它们会溢出。

希望这是有道理的。

编辑：注意我是如何通过将高度和宽度减少 40 像素来补偿 20 像素的填充（因为它会在左右以及顶部和底部添加填充，从而增加 40 像素的宽度和高度）

于 2012-08-22T12:10:57.753 回答
0

如果你知道父 div 的宽度和高度，你可以为孩子设置正确的样式，没有百分比，所以这个jsFiddle可能会为你工作。

于 2012-08-22T12:14:31.253 回答
0

边框不包含在您的宽度/高度中，那么您的 150x150 将“变成”具有 10px 边框的 170x170。

两种解决方案：

  1. 考虑边框，增加你的 div 宽度/高度
  2. 使用更多的 div，忘记了边框

这是一个Jsfiddle向您展示两种解决方案

于 2012-08-22T12:15:01.173 回答
0

因为您指定了边框厚度，所以高度和宽度不会考虑到显示嵌套在边框内。如果我理解正确，您的问题的解决方案可以实现如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type='text/css'> 
   .d1{ width:150px;height:150px;overflow:auto;border: solid 10px black;background:red;} 
   .d2{ height:73%; width:73%;border: solid 20px blue; background:green;} 
</style> 
</head> 
<body> 
   <div class="d1"> 
       <div class="d2">some text</div> 
   </div> 
</body> 
</html>
于 2012-08-22T12:21:52.547 回答
0

基本上你遇到了Html box model的问题。

您可以自己计算数学，或者根据您必须支持的浏览器，有新的“box-sizing”css 样式可以改变盒子模型的工作方式。

这是一个显示如何使用它的小提琴：

http://jsfiddle.net/EHUab/

于 2012-08-22T12:30:46.200 回答