Div укладка / макет с CSS или JavaScript

Question

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

<div id="1" style="height: 200px" class="inline">some content here</div>
<div id="2" style="height: 600px" class="inline">some content here</div>
<div id="3" style="height: 300px" class="inline">some content here</div>
<div id="4" style="height: 200px" class="inline">some content here</div>

с таким стайлингом

.inline { display: inline-block; vertical-align: top; width: 48%;}

так что # 1 будет идти влево, а затем # 2 поднимется рядом с ним вправо, отлично, но # 3 не будет скользить вверх на 400px, чтобы поместиться ниже # 1. (конечно) ... это идет на левой стороне, но в 600px от вершины, очищающей основание # 2. и т.д ...

как бы я мог заставить div скользить в пустые пространства, возможно ли это с помощью css? JQuery может быть? я знаю, что мог бы написать столбец div, чтобы пометить его, но так как число div постоянно меняется, а высота меняется в зависимости от содержимого. Было бы неплохо просто избавиться от места, так как нас не волнует порядок.

есть мысли?

Answer 1

К сожалению, это невозможно с чистым CSS, вам понадобятся отдельные div для каждого столбца. К счастью, вы можете достичь этого с помощью jQuery. Нечто подобное должно сработать:

$(function() {
    var odd_divs = $('div.inline:odd');
    var even_divs = $('div.inline:even');
    var left = $('<div id="left-column" class="column"/>').append(odd_divs);
    var right = $('<div id="right-column" class="column" />').append(even_divs);
    $('#somewhere').append(left).append(right);
});

И измените свой CSS следующим образом:

.column {
    width: 50%;
    display: inline-block; 
    vertical-align: top;
}

EDIT

Как отметил Брайан МакКенна, на самом деле можно добиться этого эффекта с помощью CSS-плавающих элементов. Вы можете использовать jQuery для добавления имен классов следующим образом:

$(function() {
    $('div.inline:odd').addClass('box-left');
    $('div.inline:even').addClass('box-right');
});

Answer 2

Я не уверен, правильно ли я понимаю проблему. Полагаю, вы хотите, чтобы это выглядело как пример, который я только что сделал, http://jsbin.com/emeja

HTML-код, который я использовал, был таким:

<div style="height: 200px" class="box-left">some content here</div>
<div style="height: 600px" class="box-right">some content here</div>
<div style="height: 300px" class="box-left">some content here</div>
<div style="height: 200px" class="box-right">some content here</div>

CSS выглядит так:

.box-left { float: left; clear: left; width: 48%;}
.box-right { float: right; clear: right; width: 48%;}

Хитрость заключается в том, что плавающие ящики очищают их, чтобы ящики не отображались рядом с ящиками в том же столбце.

Answer 3

Вы можете сделать это в IE (Divs будет хорошо прижиматься), но не работает в FF и т. Д. (См. эту страницу для примера - ссылки на правильные используют эту теорию - Я должен знать, я пытался это исправить!)

Тем не менее, вот мысль из левого поля - может показаться слишком сложным, но ...

JQuery treeMap ?

Перейти http://newsmap.js и почесать свой мозг, пытаясь понять, как они это сделали тоже? Звучит безумно, но это и treeMap - более сложная версия того, чего вы пытаетесь достичь.

Rob

Answer 4

Вам, скорее всего, придется разделить столбцы и назначить каждый второй элемент в другой контейнер.

<div id="content" style="overflow: hidden;">
  <div id="left" style="width: 48%; float: left;">
    <!-- This is where every odd numbered div goes -->
  </div>
  <div id="left" style="width: auto; margin-left: 50%;">
    <!-- This is where every even numbered div goes -->
  </div>
</div>

Если у вас возникли проблемы с выбором контента в цикле for для создания этих произвольных элементов div, это поможет:

// Render Header
for(int i = 0; i < list.count(); i++)
{
   if (i % 2 == !)
     continue;

   // Render my div inside left colunm
}

// Render In-Between

for(int i = 0; i < list.count(); i++)
{
   if (i % 2 == !)
     continue;

   // Render my div inside left colunm
}

// Render Footer

Этот код полагается на модуль по выбору ваших предметов из вашего списка и должен поместить их в нужное место, тогда ваши внутренние элементы должны находиться прямо под друг другом в столбце.