einen Rahmen um 2 divs

Question

Nur eine kurze Frage ...

ich zwei divs geschaffen habe - im Wesentlichen zwei Quadrate, ein großer klein - positionierte man unter anderen.

Ich möchte einen Rahmen um diese beiden divs setzen die gesamte Form zu umreißen - nicht einen Umriss um beide divs wie ich im Bild gemacht haben - Er lässt die Grenze zwischen dem ich umkreist im Bild. Ist das möglich? Hier

ist die HTML und CSS für die divs:

#shapeTop { 
 
    height: 70px; 
 
    width: 70px; 
 
    background: blue; 
 
    float: right; 
 
    outline: 4px solid black; 
 
} 
 
    
 
#shapeBottom { 
 
    height: 420px; 
 
    width: 420px; 
 
    background: blue; 
 
    clear: both; 
 
    float: right; 
 
    outline: 4px solid black; 
 
}

<div id="shape"> 
 
    <div id="shapeTop"> 
 
    </div> 
 
    
 
    <div id="shapeBottom"> 
 
    </div> 
 
</div>

Vielen Dank im Voraus - G

Answer 1

Verwenden border statt, deaktivieren Sie den unteren Rand auf der Top-Box, fügen position: relative zur Top-Box, so dass es auf den Boden eines zeigt, und verwenden Sie translateY() die Top-Box um 4 Pixel zu drücken, so dass es die untere Box deckt Rand.

#shapeTop { 
 
    height: 70px; 
 
    width: 70px; 
 
    background: blue; 
 
    float: right; 
 
    border: solid black; 
 
    border-width: 4px 4px 0; 
 
    position: relative; 
 
    transform: translateY(4px); 
 
} 
 
    
 
#shapeBottom { 
 
    height: 420px; 
 
    width: 420px; 
 
    background: blue; 
 
    clear: both; 
 
    float: right; 
 
    border: 4px solid black; 
 
}

<div id="shape"> 
 
    <div id="shapeTop"> 
 
    </div> 
 
    
 
    <div id="shapeBottom"> 
 
    </div> 
 
</div>

Answer 2

Einfach, setzen Sie einfach die border-bottom Eigenschaft auf 0px oder keine , für die oberste Box (und konvertieren Sie alle outlines zu borders).

Dann setzen Sie border-top für die untere Box auf keine.

Schließlich, fügen Sie ein a: vor Pseudo-Element zum unteren Feld (Sie müssen auch position: relative; auf der unteren Box). Dies: vor Element sollte den folgenden Code enthält:

#bottomBox:before { 
content: ""; // needed any :before element 
position: absolute; // needed for following code 
left: 0; // 
top: 0; // sets it to start at the top left 
height: 2px; /* thickness of border */ 
width: 150px; /* adjust this until its the correct length */ 
background-color: black; /* color of border */ 

} 

Answer 3

Einstellung border-bottom auf 0px nicht border-top aus dem großen Platz entfernen, empfehle ich zu setzen: border-bottom: 5px solide blau; und haben #shapeTop unter #shapeBottom und haben diese Eigenschaft in der letzten Zeile - in diesem Fall überschreibt alles oben.