Javascript 链接两个HTML div'；相互关联的维度？

如果我有divA和divB，有没有办法说

A.width=B.width=MAX（A.width，B.width）

？也就是说，无论哪一个具有最大的内部内容，都将决定两者的大小

---

我试图解决的实际问题是列-左、中和右。我希望左侧和右侧的宽度保持不变（但这可能因内容而异）。

不太清楚您希望从描述中得到什么。但我可以这样重写你的代码

  var properWidth = Math.max($("#a").width(), $("#b").width());
  $("#a").css("width", properWidth + "px");
  $("#b").css("width", properWidth + "px");

---

我不确定您是否需要这种解决方案。

使用CSS无法实现这一点。但是，如果有一种方法可以使用基于JS的解决方案来实现这一点。这里我使用jQuery。假设您有两个div，分别有

a

和

b

类

$(function() {
    function equalizeSize($ele) {
        if($ele.length > 1) {
            // Let CSS automatically calculate natural width first
            $ele.css({ width: 'auto' });

            // And then we fetch the newly calculated widths
            var maxWidth = Math.max.apply(Math, $ele.map(function(){ return $(this).outerWidth(); }).get());
            $ele.css({ width: maxWidth });
        }
    }

    // Run when DOM is ready
    equalizeSize($('.a, .b'));

    // Run again when viewport has been resized, which **may** affect your div width.
    // This is optional, but good to have
    // ps: You might want to look into throttling the resize function
    $(window).resize(equalizeSize($('.a, .b')));
});

请参见此处的概念验证小提琴：

此简单功能的优点：

允许您指定要使宽度相等的元素

使用

.map（）

函数构造数组，然后使用

Math.max.apply

获取数组中的最大值

在函数首次启动时强制自动计算宽度（特别是在调整视口大小时）

允许您在更改divs中的内容时使用处理程序

equalizeSize（）

再次调用以重新计算大小。。。您可以再次调用该函数，例如，在AJAX调用将内容附加到任一元素之后

---

我不确定有没有办法做到这一点。但是为什么不创建一个默认函数来设置大小：

function changeSize(w, h)
{
    A.setAttribute('style', 'width:'+w+'; height:'+h);
    b.setAttribute('style', 'width:'+w+'; height:'+h);
}

---

工作提琴：

使用css3弹性盒有问题吗？嗯，这可能是最好的解决方案。有没有办法做到这一点？比如说如果b以后改变？@xtravar那将是JavaScript（jQuery），所以当你的一个div的大小改变时就必须调用它。这真的很酷，并且回答了我的很多问题。width（）返回的值似乎不正确（按单位或其他方式）。我会继续玩的。编辑：更改为outerWidth（），代码正常工作。这是预期的吗？是的，这是有意义的，特别是当您为

声明了

框大小：边框框

，并且它们的样式中有填充物时。