Question

How do I cut the shared border line between these two divs? I want the top small div to have border on three sides expect bottom and the larder div below that to have only top border but leaving the shared border. So it will look like a line running across both divs upper borders. I tried overlaying top div on the bottom. But Not getting what I want.

 .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>

From - enter image description here

——

“entergraph

Answer 1

实现这一效果的正常方式是把箱子放在顶上,倒在边界上。在您的事例中,您可以通过在以下表格中添加“条形”:相对;底:-1px ,并删除“条形”栏:3em 。

,见jsFiddle。

Answer 2

.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>

This question was the first that popped up for me so i felt it was best if i answered it properly unlike the accepted answer above. Using 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;
}

友情链接