confine verticale tra DIV galleggianti usando i CSS

Question

ho la seguente struttura HTML

<div id='parent'> 
    <div id='child-1'>Some text goes here</div> 
    <div id='child-2'>Different text goes here</div> 
    <div class='clear'></div> 
</div> 

Ora, ho il seguente css

#parent { 
    width: 800px; 
    position: relative; 
} 

#child-1 { 
    width: 500px; 
    float: left; 
} 

#child-2 { 
    width: 200px; 
    float: left; 
} 

.clear { 
    clear: both; 
} 

Ora, il contenuto dei div figlio (bambino-1 e child-2) potrebbe essere qualsiasi cosa, quindi eventualmente child-1 potrebbe avere un'altezza maggiore di child-2, o child-2 potrebbe avere un'altezza maggiore di child-1.

Quello che voglio fare è avere una linea verticale tra child-1 e child-2, e questa linea ha la lunghezza del div che è dell'altezza più lunga. Ho provato il bordo su entrambi i div, (bordo destro per bambino-1 e bordo sinistro per div-2), ma questa non è una buona idea, perché la linea apparirà spessa dove i due div si toccano e poi si assottigliano per l'estensione parte.

Come posso farlo? Mi piace anche usare CSS solo se possibile, senza jQuery né JavaScript. Se pensi che siano necessari div extra, allora è ok.

Grazie.

Answer 1

ho cercato di confine su entrambi i div, (bordo destro sul bambino-1 e lasciato rasentano div-2, ma questo non è una buona idea, perché la linea apparirà spessa dove i due div si toccano e poi si assottigliano per la parte estesa

Questo è un buon modo per andare, in realtà. Il passo finale, tuttavia, è di dare al div destro un margine sinistro negativo di 1px (assumendo che il bordo sia largo 1px), in modo che i due bordi si sovrappongano.

#child-1 { 
    width: 500px; 
    float: left; 
    border-right: 1px solid gray; 
} 

#child-2 { 
    width: 200px; 
    float: left; 
    border-left: 1px solid gray; 
    margin-left: -1px; 
} 

Un'altra opzione è quella di utilizzare display: table sul genitore e poi display: table-cell sulle colonne, e quindi hanno una singola linea di confine tra di loro.

Answer 2

tenta di utilizzare

border-left:1px solid #color; 
margin-left:2px; 

e

border-right:1px solid #color; 
margin-right:2px; 

Answer 3

Si può anche dare border-right: 1px solid #000; solo al primo div se questo div è più lungo del secondo div e se il secondo div è più lungo è possibile assegnare border-left: 1px solid #000; solo al secondo div.

Answer 4

Il semplice:

elements { 
    border-left: black solid 1px; 
} 

elements:nth-child(1) { 
    border-left: none; 
}