Выравнивание 4 делений с динамической высотой с помощью CSS

Question

У меня есть 4 деления, которые я хочу приобрести максимально чистым способом.Все они содержат списки, которые можно получить по разным ставкам.Скорее всего, 2-й див будет самым длинным.

То, что у меня сейчас есть, всплывает # 1,3,4 слева и № 2 справа, это прекрасно работает, если № 2 достаточно длинный (сценарий 1) но если # 2 короче # 1, то # 4 оставляет большое пространство между # 1 и # 4 (сценарий 2) В конце, когда # 2 превосходит остальные, это должно выглядеть как сценарий 3

Изображение, иллюстрирующее проблему

Спасибо за помощь!

Answer 1

Я сталкивался с этой проблемой раньше с помощью CSS, но, к сожалению, я не могу вспомнить, как я (если? Lol ..) исправил ее. По какой-то причине третий div зависает на дне второго.

Несмотря на это, я написал небольшой скрипт js, который работает, несмотря на то, что он довольно хакерский:

height = document.getElementById("col2").offsetHeight;
if (height <= 60) {
    var col4 = document.getElementById("col4");
    var margOrig = parseInt(col4.getStyle('margin-top'));
    height = height + margOrig;
    col4.style.marginTop = "-" + height + "px";
}

Размер 60 установлен здесь только для надуманного примера на JSfiddle. Это явно не завершено, это скорее набросок. Я не знаю, насколько последовательно будут заполняться столбцы вашего сайта и т. Д. И т. Д. Надеюсь, вы найдете решение CSS.

Вот скрипка, если хотите - http://jsfiddle.net/MmXne/11/
Извините, это не совсем то, что вы искали. Я потратил около часа, возиться с CSS и не повезло: - /

Edit2: еще лучший способ - вычесть высоту col2 из col1. Затем, если это >= 0, запустите скрипт. Как только второй столбец становится длиннее первого, плавающее значение в любом случае портится, что является совершенно новой проблемой.

Answer 2

Согласно вашей иллюстрации, вот что я бы сделал:

Создайте два элемента div, сложенных рядом друг с другом, одинаковой высоты, например,

<div class="1"></div><div class="2">
<div class="clear: both;"></div>
<div class="3"></div><div class="4">

Затем установите для divов одинаковую минимальную высоту, но если у вас есть рамка вокруг них, это немного усложняет, как вы упомянули, так что вы можете создать фоновое изображение, которое обернет оба div: *

<div class="wrapperbg"><div class="1"></div><div class="2"></div>
<div class="clear: both;"></div>
<div class="wrapperbg"><div class="3"></div><div class="4"></div>

Таким образом, вы можете установить .wrapperbg на одно и то же фоновое изображение, и оно будет растягиваться, чтобы соответствовать размеру обоих div. убедитесь, что вы установили переполнение на скрытый (overflow: hidden;) на .wrapperbg, потому что ваши div'ы, вероятно, будут перемещаться.