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

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

问题是它们有不同的高度，根据某些结果进行修改。有时左div的高度大于右div，有时则相反。如果左div较大，则边框应设置为border right；如果右div较大，则边框应设置为border left

我无法控制div的高度，它是动态设置的。

---

您有解决方案吗？

您可以通过以下容器元素模拟边框：

下面的解决方案只是在包含两个子元素的

.container

中居中的伪元素

：before

上放置一个边框

HTML

---

我相信您想要做的是创建一个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');
        }
    });

---

@世邦魏理仕的这一解决方案值得称赞：

在两个元素上设置边框，并使它们以负数“重叠” 边框宽度的边距

如果CSS有点复杂（两个div之间有一个边距？），可以通过比较它们的

offsetHeight

s将边框设置为最高的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';
}

---

请发布您的标记和CSS，或者制作一个小摆设。通常，一个简单的解决方案是：在两个元素上设置边框，并使它们“重叠”通过边框宽度的负边距…我尝试了这个方法，在它们重叠的地方，边框更厚。。下面是一个使用@CBroe建议的提琴：注意第二个div上的负左边距。下面是一个根据最高div设置边框的提琴：。但是@CBroe的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');
        }
    });

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