Макет в стиле макета ТОЛЬКО с CSS

Как вы можете видеть на изображении, каждый ящик имеет разную высоту, и есть несколько коробок с двойной шириной.

Можно ли создать макетный макет только с CSS?

Ответ 1

С поддержкой css3 вы можете сделать это:

.container {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    width: 360px;
}

.container div {
    display: inline-block;
    width: 100%;
    background-color: red;
}

Без поддержки css3 вам нужно прибегнуть к js, к сожалению.

Ответ 2

Сейчас я работаю над сайтом с тем же макетом, двумя колонками со случайным двойным ящиком. То, что я делаю, просто отделяет двойную ширину от остальной части контента. Например:

<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="double-wide">
</div>
<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Затем вы можете применить решение столбца CSS3 только к классу two-columns. Если вам нужно поддерживать IE9, вам, к сожалению, нужно добавить резервное копирование JavaScript.