0

示例 Plunk 在这里。

大家好， 我正在尝试在一个外部 div 中容纳两个内部 div（一个标题栏和一个画布）。内部 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>

如您所见，类的 div.plugin拉伸以容纳内部.plugin_title和画布 div，但高度“增长”了 5 px。

在这个例子中，根据我的计算，css 标题高度为 20px + 1px 下边框 = 21px。画布高度为 348px + 1px 上边框 + 1px 下边框 = 350px。根据开发者工具，两者之和为 350px + 21px = 371px，而父.plugin级为 376px。这一点尤其明显，因为底部阴影在我想要的位置下方偏移了 5px。

为什么会发生这种情况？是否有针对此问题的 CSS（无 JavaScript）解决方案？

重要提示：容器 ( .plugin) div 是在内部 div 之前生成的。所以我不能只在容器 div 中设置高度，因为在创建时，我不知道画布 div 的高度。在创建内部 div 之后，我可以进行计算并重新设置容器 div 的高度，是的，但我正在寻找一个仅 css 的解决方案。

4

2 回答 2

2

您可以通过设置line-height:0on.plugin然后明确指定它来解决此问题.plugin_title。

普朗克

.plugin {
    line-height:0;
}

.plugin_title {
    line-height:20px;
}
于 2013-04-10T09:47:27.780 回答
1

添加display:table-cell到.plugin和canvas

.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); width:auto; 
          display:table-cell;          
}
  .plugin_canvas {
        position: relative;
        background-color: black;
        border: 1px solid #300;
        border-bottom-right-radius: 5px;
        z-index: 800;  
        display:table-cell;         
    }

演示

于 2013-04-10T09:43:25.550 回答