css: блоки float, занимающие все свободное пространство

Question

Я пытаюсь создать «мозаику изображений», состоящую в основном из изображений одинакового размера, а некоторые из них двойной высоты.

Все они должны выровняться аккуратно какэто:

Чтобы сделать автоматическую генерацию этих мозаик максимально простой, я подумал, что их плавание будет лучшим вариантом.К сожалению, большой блок заставляет следующие 1010 * течь позади этого, но не раньше:

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

---

Код, который я сейчас использую:

FIDDLE

HTML:

<div class="frame">
    <div id="p11" class="img">1.1</div>
    <div id="p12" class="img h2">1.2</div>
    <div id="p13" class="img">1.3</div>
    <div id="p21" class="img">2.1</div>
    <div id="p22" class="img">2.2</div>
</div>

CSS:

.frame {
    background-color: blue;
    border: 5px solid black;
    width: 670px;
}
.img {
    width: 200px;
    height: 125px;
    background-color: white;
    border: 1px solid black;
    float: left;
    margin: 10px;
}
.h2 {
    height: 272px;
}

Answer 1

Вам нужно использовать Javascript для достижения этого эффекта, я должен был сделать это один раз, и я использовал http://masonry.desandro.com/ - работал хорошо!

Answer 2

Вы можете использовать макет столбца следующим образом: http://jsfiddle.net/KKUZL/

Я не знаю, будет ли это противоречить вашему процессу автоматизации, хотя ....

Answer 3

Чистое решение CSS

Протестировано в Firefox, IE8 + (IE7 выглядит так, как будто он должен быть нацелен на добавление верхнего поля, добавленного к 2.1, поскольку оно перекрывает 1.1). См. Скрипку . Это предполагает, что .h2 - это средний div (как ваш пример). Если оставить больше всего div, это не должно нуждаться в каких-либо изменениях. Если вы правы больше всего, вам нужно расширить отрицательную маржу, включив в нее и третий div следующий.

.h2 + div {
    float: right;
    margin: 10px 14px 10px 0; /*14px I believe also has to do with borders */
}

.h2 + div + div {
    margin-left: -434px; /*need to account for borders*/
    clear: right;
}

Answer 4

Я понимаю, что это решение не только для CSS, но для чего оно стоит ( JSFiddle ):

HTML:

<div id='container'></div>

CSS:

html, body {
    margin:0px;
    padding:0px;
    height:100%;
}
body {
    background-color:#def;
}
#container {
    margin:0px auto;
    width:635px;
    min-height:100%;
    background-color:#fff;
    box-shadow:0px 0px 5px #888;
    box-sizing:border-box;
    overflow:auto;
}
.widget {
    float:left;
    box-sizing:border-box;
    padding:10px 10px 0px 0px;
}
.widget > div{
    height:100%;
    box-sizing:border-box;
    color:#fff;
    font-size:3em;
    text-align:center;
    padding:.5em;
    overflow:hidden;
}
.widget > div:hover {
    background-color:purple !important;
}

JS:

////////////////////////////////////////
//  ASSUMPTIONS
//    
var TWO_COLUMN_WIDGET_COUNT = 1;
var ONE_COLUMN_WIDGET_COUNT = 15;

var NUMBER_OF_COLUMNS = 2;

////////////////////////////////////////
function rand(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
var colorFactory = (function () {
    var colors = [
        '#CC9A17',
        '#9B2C16',
        '#1A8B41',
        '#D97114',
        '#3B9EE6'];
    var index = 0;
    return function () {
        if (index > 4) {
            index = 0;
        }
        return colors[index++];
    }
})();
function widgetFactory(columnSpan) {
    return {
        'height': rand(10, 30) * 10,
            'width': 100 * columnSpan / NUMBER_OF_COLUMNS,
            'columnSpan': columnSpan,
            'color': colorFactory()
    }
}
function getWidgets() {
    var widgets = [];
    for (var i = 0; i < TWO_COLUMN_WIDGET_COUNT; i++) {
        widgets.push(widgetFactory(2));
    }
    for (var i = 0; i < ONE_COLUMN_WIDGET_COUNT; i++) {
        widgets.push(widgetFactory(1));
    }
    return widgets;
}
function getHighestOffset(offsets){

}
function getHighestSlot(offsets, numOfColumns){

}
$(document).ready(function () {
    var container = $('#container');
    var widgets = getWidgets();
    var col1 = Math.floor(container[0].offsetLeft);
    var col2 = Math.floor(container[0].clientWidth / 2 + container[0].offsetLeft);
    var offsets = {};
    offsets[col1] = 0;
    offsets[col2] = 0;
    var newLine = true;

    for (var i = 0; i < widgets.length; i++) {
        var w = widgets[i];
        var marginTop = 0;
        if (offsets[col1] < offsets[col2]) {
            marginTop = (offsets[col2] - offsets[col1]) * -1;
        }
        if(offsets[col1] <= offsets[col2] || w.columnSpan == 2){
            newLine = true;
        }
        var margin = 'margin-top:' + marginTop + 'px;';
        var height = 'height:' + w.height + 'px;';
        var color = 'background-color:' + colorFactory() + ';';
        var width = 'width:' + w.width + '%;';
        var padding = newLine ? "padding-left:10px;" : "";
        var component = $('<div class="widget" style="' + padding + margin + height + width + '"><div style="' + color + '">' + i + '</div></div>');
        component.appendTo(container);
        var c = component[0];

        var index = 0;
        var minOffset = null;
        for(var p in offsets){
            if(minOffset == null || offsets[p] < minOffset){
                minOffset = offsets[p];
            }
            if(p == Math.floor(c.offsetLeft)){
                index = 1;
            }
            if(index > 0 && index <= w.columnSpan){
                offsets[p] = c.offsetTop + c.offsetHeight;
                index++;
            }
        }
        newLine = minOffset >= offsets[col1];
    }
});