Структура блоков

301

07 июня 2017, 01:50

Подскажите, как правильно организовать структуру блоков, приведённую на рисунке?
Интересует вариант, чтобы можно было легко добавить адаптив с помощью медиа-запросов. Допустим на больших экранах в две колонки ряд, а на маленьких в одну колонку.
В этой структуре в первой колонке есть изображение 400px, а во второй колонке текст с описанием данного изображения.
Можно было бы задать для блока с текстом также высоту 400px, как и у изображения, но при изменении разрешения текст может вылезать из блока. Как я понимаю, высоту лучше не указывать для блоков в целях адаптива?

Answer 1

Кажется, если я правильно всё понял, то вот.

HTML:

<div class="container">
    <div class="block1"></div>
    <div class="block2">title<br>description<br>some text</div>
    <div class="block3">Содержимое</div>
    <div class="block4">Содержимое</div>
</div>

CSS:

.container{
    width: 800px;
}
.block1, .block2, .block3, .block4 {
    width: 400px;
    height: 400px;
    float: left; /*Делаем все блоки прилипшими друг другу*/
}
.block1 {
    background: url('img.jpg');
}
.block2 {
    word-wrap: break-word; /*Делаем так чтобы в блоке текст переносился */
    overflow: hidden; /*Прячем всё что выходит за пределы блока*/
}
@media only screen and (max-width: 601px) { /*Если ширина страницы меньше 601 пикселя - применяем стиль, если больше - не применяем.*/
    .container{
        width: 400px;
    }
}