Связать два измерения HTML div'ов друг с другом?

0

Если у меня есть div A и div B, есть ли способ сказать A.width = b.width = MAX(a.width, b.width)? То есть, какой бы самый большой внутренний контент не определял, насколько велики оба.

Фактическая проблема, которую я пытаюсь решить, - это столбцы - левый, средний и правый. Я хочу, чтобы левая и правая были одинаковой фиксированной шириной (но это может варьироваться в зависимости от их содержимого).

  • 0
    какие-либо проблемы в использовании гибких коробок css3?
Теги:
layout

3 ответа

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/

Преимущества этой простой функции:

  1. Позволяет вам определять, с какими элементами вы хотите выравнивать ширину.
  2. Использует функцию .map() для построения массива, который затем мы используем Math.max.apply для получения максимального значения в массиве
  3. Принудительное автоматическое вычисление ширины при первом срабатывании функции (особенно при изменении размера окна просмотра)
  4. Позволяет вызывать повторный пересчет размера, используя обработчик equalizeSize() при изменении содержимого в div... вы можете снова вызвать функцию, скажем, после вызова AJAX, который добавляет содержимое к любому элементу.
Поделиться
  • 0
    Это действительно круто и отвечает на множество вопросов, которые у меня есть. Значение, возвращаемое width (), кажется неправильным (либо в единицах, либо в противном случае). Я буду продолжать играть с этим. редактировать: изменил на externalWidth (), и код работает. Это ожидается?
  • 0
    Да, это имеет смысл, особенно когда вы объявили box-sizing: border-box для <div> и у них есть отступы в их стилях.
0

Я не уверен, что есть способ сделать это так. Но почему бы не сделать функцию по умолчанию для установки размера:

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

Рабочая скрипка: http://jsfiddle.net/kychan/ER2zZ/

Поделиться
0

Не совсем ясно, что вы хотите от описания. но я могу переписать ваш код таким образом.

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

Я не уверен, что это такое решение, которое вы хотите.

Поделиться
  • 0
    Хм, это может быть лучшим решением. Есть ли способ сделать это неявно? Как, если б изменится позже?
  • 0
    @xtravar, который будет JavaScript (jQuery), поэтому должен вызываться всякий раз, когда изменяется размер одного из ваших элементов div.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню