0

Изображение 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

2
  • Без [дополнительных элементов][1] разметки, это будет сделать не просто. Даже если высчитать нужные значения для одного разрешения экрана устройств, то далеко не факт, что на других будет отображаться корректно. [1]:jsfiddle.net/Deonis/xj7sze2L/1
    – Deonis
    2 сен 2014 в 20:14
  • Это будет отображаться только на одном экране, статическая ширина до 1200 пикселей.
    – Michael-F
    2 сен 2014 в 20:19

1 ответ 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>

4
  • А есть какин-нибудь идеи по rowspan для центрального синего блока?
    – Michael-F
    2 сен 2014 в 21:14
  • Так rowspan не нужен. Я бы как-то так сделал — jsfiddle.net/syzho9n8
    – Detonator
    2 сен 2014 в 21:21
  • @Michael-F, никакого colspan для варианта, который предложил @Detonator, не нужно. Но этот вариант так же, как и мой в комментарии выше, требует дополнительной разметки, которую вы отметаете в принципе. Единственное, что могу вам предложить, - это использовать свойство column-count. [Смотрите пример][1]. Решение не кроссбраузерное, но это, как я уже понял, вас не очень-то волнует. [1]:jsfiddle.net/Deonis/vn89peLv/2
    – Deonis
    2 сен 2014 в 21:23
  • Точно, как же я сразу не додумался - экранирование блоков!!! Вот я ***! Спасибо @Detonator ! Спасибо всем, кто подключился к вопросу.
    – Michael-F
    2 сен 2014 в 21:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.