Question

如果我有div A 和div B ，有没有办法说A.width = b.width = MAX(a.width, b.width)？也就是说，无论哪个具有最大的内部内容都会决定两者的大小。

我想要解决的实际问题是列 - 左，中和右。我希望左边和右边是相同的固定宽度（但这可能因内容而异）。

Answer 1

无法使用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')));
});

请参阅此处的概念验证小提琴：http://jsfiddle.net/teddyrised/N4MMg/

这个简单功能的优点：

允许您指定要使宽度均衡的元素。
使用.map()函数构造一个数组，然后我们使用Math.max.apply来获取数组中的最大值
在函数首次触发时强制自动计算宽度（特别是在调整视口大小时）
允许您在更改div中的内容时使用处理程序equalizeSize()再次调用重新计算大小...您可以再次调用该函数，例如，在将内容附加到任一内容的AJAX调用之后元件。

Answer 2

您对描述的要求并不十分清楚。但我可以这样重写你的代码。

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

我不确定这是否是您想要的解决方案。

Answer 3

我不确定有没有办法这样做。但是为什么不设置默认函数来设置大小：

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

工作小提琴：http://jsfiddle.net/kychan/ER2zZ/

将两个HTML div的尺寸相互链接？

3 个答案: