0

プランクの例はこちら。

こんにちは、外側の div 内に 2 つの内側の 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>

ご覧のとおり、class の div は.plugin、内側の div とキャンバス div に対応するように引き伸ばされ.plugin_titleますが、高さが 5 ピクセルだけ「大きく」なります。

この例では、私の計算によると、css タイトルの高さは 20px + 1px 下の境界線 = 21px です。キャンバスの高さは 348px + 1px 上枠 + 1px 下枠 = 350px です。.plugin開発者ツールによると、2 つの合計は 350px + 21px = 371px で、親は 376px です。これは、下の影が希望する場所から 5 ピクセル下にオフセットされているため、特に顕著です。

なぜこれが起こるのですか？この問題に対する CSS (no-javascript) ソリューションはありますか?

重要: コンテナー ( .plugin) div は、内部 div の前に生成されます。したがって、作成時にキャンバス div の高さがわからないため、コンテナ div で高さを設定することはできません。内側の div を作成した後、コンテナの div の高さを計算して再設定することはできましたが、CSS のみのソリューションを探していました。

4

2 に答える 2

2

line-height:0on を設定してから、 on.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 に答える