Не получается расставить блоки DIV

Question

Не получается расставить блоки DIV

Рейтинг: 0Ответов: 1Опубликовано: 02.09.2014

Изображение link text

Помогите, пожалуйста, советом.

На изображении показано, как должны стоять блоки, но у меня не получается их выстроить таким образом. Пробовал и Float, и position.

HTML:

<DIV class="wrap">
    <div class="red"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="red"></div>
</DIV>

CSS:

.wrap {
    width: 940px;
    margin: 0 auto;
    }
.wrap .red {
    background: #f00;
    width: 300px;
    height: 150px;
    margin: 10px;
    }
.wrap .blue {
    background: #00f;
    width: 300px;
    height: 300px;
    margin: 10px;
    }

Как правильно дописать CSS, подскажите, пожалуйста. Блоки статичные, наполняются различной инфой, но размер не меняют.

alt text

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

А почему бы не переверстать с использованием display: table-cell?

.wrap {
    width: 940px;
    margin: 0 auto;
}
.wrap .col {
    display: table-cell;
    vertical-align: top;
    padding-right: 10px;
}
.wrap .red {
    background: #f00;
    width: 300px;
    height: 150px;
    margin-bottom: 10px;
}
.wrap .blue {
    background: #00f;
    width: 300px;
    height: 310px;
    margin-bottom: 10px;
}

<div class="wrap">
    <div class="col">
        <div class="red"></div>
        <div class="red"></div>
    </div>
    <div class="col">
        <div class="blue"></div>
    </div>
    <div class="col">
        <div class="red"></div>
        <div class="red"></div>
    </div>
</div>

Не получается расставить блоки DIV

Ответы