2

これらの2つのdiv間の共有境界線をカットするにはどうすればよいですか？上部の小さなdivの3つの側面に境界線があり、その下のlarder divには上部の境界線のみがあり、共有の境界線は残されている必要があります。したがって、両方のdivの上部境界を横切る線のように見えます。上部のdivを下部にオーバーレイしてみました。しかし、私が欲しいものを手に入れていません。

 .ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;

  }

    .ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;

  }


<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>

から - ここに画像の説明を入力してください

に -

ここに画像の説明を入力してください

4

2 に答える 2

5

この効果を実現する通常の方法は、上部のボックスを境界線の上に移動させることです。あなたの例では、クラスに追加position: relative; bottom: -1pxし、クラスから.iheadを削除することでこれを実現できます。margin-top: 3em.ibody

jsFiddleを参照してください。

于 2012-05-15T18:14:12.140 に答える
0 

.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
    border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
    border-left: none;
}
<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>

この質問が最初に出てきたので、上記の受け入れられた答えとは異なり、適切に答えた方がいいと感じました。cssの使用：

.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
    border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
    border-left: none;
}
于 2021-05-20T23:33:22.877 に答える