biên giới dọc giữa DIV nổi sử dụng CSS

Question

tôi cấu trúc HTML sau

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

Bây giờ, tôi có css sau

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

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

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

.clear { 
    clear: both; 
} 

Bây giờ, nội dung của các div con (con-1 và child-2) có thể là bất cứ điều gì, vì vậy cuối cùng trẻ em-1 có thể có chiều cao lớn hơn trẻ em-2, hoặc trẻ em-2 có thể có chiều cao lớn hơn trẻ em-1.

Những gì tôi muốn làm, có một đường thẳng đứng giữa trẻ em-1 và trẻ em-2, và dòng này có chiều dài của div có chiều cao dài hơn. Tôi đã thử viền trên cả hai div, (đường viền phải cho child-1 và border trái cho div-2), nhưng đây không phải là ý tưởng hay, bởi vì line sẽ xuất hiện dày nơi hai div chạm vào nhau và sau đó mỏng cho phần mở rộng phần.

Tôi có thể làm như thế nào? Tôi cũng thích sử dụng CSS chỉ khi có thể, không có jQuery và JavaScript. Nếu bạn nghĩ rằng divs thêm là cần thiết thì điều này là ok mặc dù.

Cảm ơn.

Answer 1

tôi đã cố gắng biên giới trên cả hai divs, (biên giới ngay trên con-1 và để lại biên giới trên div-2, nhưng đây không phải là một ý tưởng hay, bởi vì dòng sẽ xuất hiện dày nơi hai div chạm vào nhau và sau đó mỏng cho phần mở rộng.

Đó là một cách hay để thực sự. Bước cuối cùng, mặc dù, là cung cấp cho các div bên phải một lề trái tiêu cực của 1px (giả sử biên giới là 1px rộng), để hai biên giới chồng lên nhau.

#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; 
} 

Một lựa chọn khác là sử dụng display: table trên mẹ và sau đó display: table-cell trên các cột, và sau đó có một đường biên giới duy nhất giữa họ.

Answer 2

cố gắng sử dụng

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

và

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

Answer 3

Bạn cũng có thể chỉ cung cấp border-right: 1px solid #000; cho div đầu tiên nếu div này dài hơn div thứ hai và nếu div thứ hai dài hơn, bạn chỉ có thể gán border-left: 1px solid #000; cho div thứ hai của mình.

Answer 4

Các đơn giản:

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

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