Сложная CSS верстка

Question

Может кто-нибудь помочь мне с чертовски сложной раскладкой плитки, как указано в ссылка .

Я пытался использовать float: left для виджетов, но я всегда получал красный блок ниже # 2. Я должен быть в состоянии динамически добавлять виджеты на черный приборной панели. Я могу использовать html5, css3 и jquery.

Там не просто 2 столбца. Если на приборной панели есть свободное пространство ширины для 3-го, 4-го и т. Д., То оно должно быть там. Может быть от одного до бесконечного количества виджетов с разным размером. Если свободного пространства по ширине нет, новые виджеты должны перемещаться вниз влево и полностью заполнять свободное пространство.

Ошибка разметки: pastie.org/593815

Дополнительный макет: img191.imageshack.us/img191/2139/picture2fdi.png

Answer 1

Я знаю, что, вероятно, слишком поздно. Но недавно я нашел этот плагин JQuery, который, кажется, решает проблему очень элегантным способом.

isotope.metafizzy.co

Надеюсь, это поможет.

Answer 2

CSS:

body {
  background: #000;
}
.left {
    float: left;
}
.right {
    float: left;
}
.widget {
    margin: 10px;
    margin-right: auto;
    margin-left: auto;
    width: 200px;
}
.content {
    margin: 10px;
    background: #fff;
    width: 300px;
}
#one {
    height: 300px;
}
#two {
    height: 400px;
}
#red {
    background: #f00;
    height: 100px;
}
#green {
    background: #0f0;
    height: 100px;
}
#blue {
    background: #00f;
    height: 100px;
}

HTML:

<div class="left">
    <div class="content" id="one"></div>
    <div class="widget" id="red"></div>
    <div class="widget" id="green"></div>
</div>

<div class="right">
    <div class="content" id="two"></div>
    <div class="widget" id="blue"></div>
</div>

Answer 3

сделать 2 контейнера div, оба плавающие: слева

тогда просто плавай: оставь все внутри этих элементов.

Самый простой способ сделать макет из двух столбцов с помощью CSS.

<div id="leftcol">
your code...
</div>
<div id="rightcol">
your code...
</div>

CSS:

leftcol,rightcol{float:left;width:(whatever);}

Answer 4

Не существует CSS-решения для того, что вы хотите. Мне кажется, я видел решения JS, но сейчас не могу понять, что именно.

Answer 5

Вы пробовали просто включить div-обертку, классифицировать его как что-то вроде "widget" и оставить его влево? Я не уверен, что понимаю, что такое цветные прямоугольники под № 1 и № 2, но если они связаны с элементами прямо над ними, я не вижу, насколько это сложно:

<div class="widget">
    <div id="widget1">stuff</div>
    <div id="widget1_1">stuff related to 1</div>
</div>

<div class="widget">
    <div id="widget2">stuff</div>
    <div id="widget2_1">stuff related to 2</div>
</div>

CSS:

.widget {float: left; overflow: auto;}
.widget div {float: left;}

Answer 6

А как насчет использования BlueprintCSS? http://www.blueprintcss.org/