Question

我有两个div并排设置，我需要在它们之间设置边框。

问题在于它们具有不同的高度，这些高度根据某些结果而变化。有时左div的高度大于右div的高度，有时则相反。如果左侧div较大，则边框应设置为border-right;如果右侧较大，则边框应设置为border-right。

我无法控制div的高度，它是动态设置的。你有解决方案吗？

Answer 1

@CBroe值得称赞这个解决方案：

在两个元素上设置边框，并使它们与负片“重叠” 边界宽度。

如果您的CSS有点复杂（div之间的边距？），您可以通过比较它们的offsetHeight来将边框设置为最高的div：

var d1= document.querySelector('#D1'),
    d2= document.querySelector('#D2');

if(d1.offsetHeight > d2.offsetHeight) {
  d1.style.borderRight= '1px solid green';
}
else {
  d2.style.borderLeft= '1px solid green';
}

Working Fiddle 2

Answer 2

您可以通过像这样的容器元素模拟边框：

以下解决方案只是在包含两个子元素的:before内居中的伪元素.container上放置一个边框。

http://jsfiddle.net/albertmatyi/5gtwdx4d/

HTML

<div class="container">
    <div class="left" style="height: 100px;"></div>
    <div class="right" style="height: 200px;"></div>
</div>

<div class="container">
    <div class="left" style="height: 200px;"></div>
    <div class="right" style="height: 100px;"></div>
</div>

<div class="container">
    <div class="left" style="height: 100px;"></div>
    <div class="right" style="height: 100px;"></div>
</div>

CSS

.container { /*important for the border */
    position: relative;
    width: 400px; /* 2x children*/
}
.container:after {  /* clearfix */
    content: '';
    display: block;
    clear: both;
}
.container:before { /* border */
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 0px;
    height: 100%;
    border-left: dashed 2px  #cc3300;
}

.container { 
    margin-bottom: 20px;
}

.left, .right { 
    width: 200px;
    float: left;
}

.left {
    background-color: #33cc00;
}
.right {
    background-color: #0033cc;
}

Answer 3

我相信你想要做的是创建一个jQuery函数来检查两个元素中较高的高度，并在其上应用边框样式。由于你没有提供任何html / css的模型，我只能猜出类名是什么：

    var leftDiv = $('.classOfLeftDiv').height();
    var rightDiv = $('.classOfRightDiv').height();

    $(document).ready(function(){
        if (leftDiv > rightDiv){
            $('.classOfLeftDiv').css('border-right' : '1px solid #abcdef');
        }else{
            $('.classOfRightDiv').css('border-left' : '1px solid #abcdef');
        }
    });

在div上设置最大高度的边框

3 个答案:

http://jsfiddle.net/albertmatyi/5gtwdx4d/

HTML

CSS