大家好，我正在尝试在一个外部 div 中容纳两个内部 div(一个标题栏和一个 Canvas )。内部 div 是动态生成的，具有固定的宽度和高度。
下面是一个(静态)示例代码，这里是一个工作代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
.plugin {
position: absolute;
z-index: 800;
border-bottom-right-radius: 5px;
-webkit-box-shadow: 5px 5px 12px 1px rgba(0, 0, 0, 0.6);
box-shadow: 5px 5px 12px 1px rgba(0, 0, 0, 0.6);
}
.plugin_title {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
font-family: arial;
background-color: #300;
z-index: 150;
height: 20px;
border-bottom: 1px solid whitesmoke;
}
.plugin_canvas {
position: relative;
background-color: black;
border: 1px solid #300;
border-bottom-right-radius: 5px;
z-index: 800;
}
</style>
</head>
<body>
<div class="plugin">
<div class="plugin_title">
<span>Plugin Title</span>
</div>
<canvas width="428" height="348" class="plugin_canvas"></canvas>
</div>
</body>
</html>
如您所见，.plugin 类的 div 拉伸(stretch)以容纳内部 .plugin_title 和 canvas div，但高度“增长”了 5 像素。
在这个例子中，根据我的计算，css标题高度为20px + 1px bottom border = 21px。 Canvas 高度为 348px + 1px 顶部边框 + 1px 底部边框 = 350px。根据 Developer Tools，两者之和为 350px + 21px = 371px，而父 .plugin 为 376px。
这一点特别明显，因为底部阴影在我想要的位置下方偏移了 5px。
为什么会这样？是否有针对此问题的 CSS(无 javascript)解决方案？
重要:容器 (.plugin) div 是在内部 div 之前生成的。所以我不能只在容器 div 中设置高度，因为在创建时，我不知道 Canvas div 的高度。我可以在创建内部 div 后进行计算并重新设置容器 div 的高度，是的，但我一直在寻找仅 css 的解决方案。
最佳答案
您可以通过在 .plugin 上设置 line-height:0 然后在 .plugin_title 上明确指定它来解决这个问题。
.plugin {
line-height:0;
}
.plugin_title {
line-height:20px;
}
关于css - 容纳内部 div 的外部 div 太大了几个像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15922233/