Vertical border between floating DIVs using CSS

问题

I have the following HTML structure

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

I also have the following CSS

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

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

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

.clear {
    clear: both;
}

Now, the contents of the child DIVs (child-1 and child-2) could be anything, so eventually child-1 might have longer height than child-2, or child-2 might have a longer height than child-1.

What I want to do, is have a vertical line between child-1 and child-2, and this line has the length of the DIV that is of longer height. I tried border on both DIVs, (right border for child-1 and left border for child-2), but this is not a good idea, because the line will appear thick where the two DIVs touch each other and then thin for the extended part.

How can I do that? I also like to use CSS only if possible, no jQuery nor JavaScript. If you think extra DIVs are needed then this is OK though.

Thanks.

回答1:

I tried border on both divs, (right border on child-1 and left border on div-2, but this is not a good idea, because the line will appear thick where the two divs touch each other and then thin for the extended part.

That's a good way to go, actually. The final step, though, is to give the right div a negative left margin of 1px (assuming the border is 1px wide), so that the two borders overlap.

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

Another option is to use display: table on the parent and then display: table-cell on the columns, and then have a single border line between them.

回答2:

The simple one:

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

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

回答3:

try to use

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

and

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

回答4:

You could also give border-right: 1px solid #000; only to your first div if this div is longer than second div and if second div is longer you could assign border-left: 1px solid #000; only to your second div.

来源：https://stackoverflow.com/questions/18039463/vertical-border-between-floating-divs-using-css

标签

html

css

border