0

こんにちは、css を使用してトリプル ボーダーを作成しようとしています。今私が持っているのは 2 つの境界線ですが、2 番目の境界線は element( div.container#main) を完全には取り囲んでいません。

私はこのブログ投稿をフォローしています。JSFiddle

境界線が要素を完全に一周するようにするための助けは素晴らしいでしょう。

4

1 に答える 1

3

したがって、本質的に問題は、絶対位置を使用し、磨耗した要素から計算することです。

何かが絶対に配置されている場合、その高さが指定されている場合、または要素にコンテンツがある場合にのみ高さが増します。この場合の回避策は、atopbottomvalue の両方を割り当てることです。これにより、基本的に要素が拡張されます。値を忘れましたbottom。これを追加すると、次のようになります。

http://jsfiddle.net/J3e9R/2/

ただし、要素がビューポートの下部に移動することに気付くでしょう。これは、配置された親 (相対、絶対、静的) がないと、配置のコンテキストとしてデフォルトで最上位の要素になるためです。

これを回避するには、追加のラッパー要素を追加して相対位置を指定するか、境界線スタイルをdiv.row; どちらの方法でも手法は同じですが、別のラッパーを追加できるかどうか、またはdiv.row状況に応じて機能するかどうかによって異なります。したがって、次のようになります。

http://jsfiddle.net/J3e9R/3/

これで、ボックスの寸法に合わせて内側の境界線が実際に機能していることがわかります。しかし今、私たちの立場はずれています。これは、外側の要素からオフセットを計算する代わりに#main、内側から外側に向かって作業しているため、測定値を反転する必要があるためです。

http://jsfiddle.net/J3e9R/4/

オーケー、これで元の箱の外縁に注文が戻ってきたので、外枠の真ん中に注文を入れるだけでいいので、測定値を約半分に変更して、最終的に欲しいです:

http://jsfiddle.net/J3e9R/1/

于 2013-03-14T00:37:03.020 に答える