Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
493 views
in Technique[技术] by (71.8m points)

html - Partial Border in CSS

I have two divs with borders as the picture below shows.

enter image description here

How do I remove only the border where the 2 divs touch like the picture below shows?

enter image description here

Here is the html and css used in the top picture (js fiddle: http://jsfiddle.net/paulyoder/whsC4/19/)

<html>
    <head>
        <style type="text/css">
            #sideBar {
                float: left;
                width: 75px;
                height: 50px;
                border-top: 1px solid black;
                border-left: 1px solid black;
                border-bottom: 1px solid black
            }

            #balanceSheetSummary {
                float: left;
                width: 150px;
                height: 150px;
                border: 1px solid black;
            }

            body { padding: 10px; }
            h2 { margin: 5px; }
        </style>
    </head>
    <body>
        <div id="sideBar">
            <h2>Side Bar</h2>
        </div>
        <div id="balanceSheetSummary">
            <h2>Content</h2>    
        </div>
    </body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You could do something like this: http://jsfiddle.net/sj2AD/1/

#sideBar {
   float: left;
   width: 75px;
   height: 50px;
   border-top: 1px solid black;
   border-left: 1px solid black;
   border-bottom: 1px solid black;
   background: red;
   position: relative;
   z-index: 2;
}

#balanceSheetSummary {
   float: left;
   width: 150px;
   height: 150px;
   border: 1px solid black;
   background: red;
   position: relative;
   z-index: 1;
   margin-left: -1px;
}

body { 
   padding: 10px; 
}
h2 { 
  margin: 5px; 
}

What I did was to add a negative margin to the right one so that the boxes overlap.

This does break, for example if the left div is higher than the right one.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...