Как сделать так, чтобы ящики на моем сайте складывались в две колонки? - PullRequest
Новая
       13

Как сделать так, чтобы ящики на моем сайте складывались в две колонки?

1 голос
/ 23 июля 2011

На мой сайт У меня есть несколько блоков с информацией, генерируемой на разных сайтах, которая генерируется динамически, в результате чего я не могу / не хочу контролировать порядок, в котором появляются эти блоки.Теперь я бы хотел, чтобы они располагались в левом или правом столбце, в зависимости от того, где есть место.

Чтобы уточнить, я нарисовал то, на что это похоже и как я хотел бы, чтобы это выглядело, но веб-сайт не позволяет мне публиковать их, так что я надеюсь, что мое описание достаточно ясно (если нет,изображения

78R5d http://i.stack.imgur.com/78R5d.png

и

T51aP http://i.stack.imgur.com/T51aP.png

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

Теперь, я боюсь, это не будет возможно без добавления некоторых определенных классов в каждую коробку, но вы никогда не знаете, какие умные решения могут придумать люди:)

Ответы [ 3 ]

1 голос
/ 24 июля 2011

Есть несколько решений этой проблемы, которые используют Javascript для разметки. Одним из них является Masonry , который является плагином jQuery. Вам просто нужно сделать базовый CSS: 

.item {
    float: left;
    width: 200px;
}

А потом как то так: 

$('#container').masonry({
    itemSelector : '.item',
    columnWidth : 240
});

Конечно, параметры, которые вы бы использовали, могут отличаться.

0 голосов
/ 24 июля 2011

После еще одного исследования я обнаружил свойство CSS 3 под названием column-width или column-count , которое может решить эту проблему . В настоящее время это поддерживается в большинстве браузеров, которые не являются IE, хотя браузеры на основе Gecko и WebKit должны использовать префиксы -moz- и -webkit- соответственно.

Я еще не понял, как заставить его отображаться идеально. В Chromium ящики можно разрезать на полпути в левой колонке и продолжить в правой, что не очень подходит для моего сайта. К сожалению, WebKit пока не поддерживает взлом, и -webkit-column-break-inside тоже не справляется. В Firefox я могу исправить это, установив фиксированную ширину и поместив прямоугольники влево, но это действительно ломает вещи в Chromium.

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

0 голосов
/ 24 июля 2011

Вы должны разделить статьи на два элемента, в противном случае вы получите пробел. Перемещайте два div'а рядом и поочередно заполняйте их динамическими блоками. 

<div class="column1">
    <article id="1">
    <article id="3">
</div>
<div class="column2">
    <article id="2">
    <article id="4">
</div>
...