0

Есть:

<div class="wrapper">
    <article></article>
    <article></article>
    <article></article>
</div>

.wrapper {
    width: 960px;
    margin: 15px auto;
}

article {
    float: left;
    width: 300px;
    background: #FFF;
}

Не могу понять, как сделать, чтобы разрешение экрана меньше 960px - колонки становились бы не по три, как сейчас, а по две и резиновыми. И так до определенного разрешения, а потом в одну.

alt text

@media screen and (max-width:960px) {

}

4 ответа 4

0

@XeL077 написал почти всё верно (min-width: 300px; перебьёт 50% и не будет работать как надо при размере меньше 600px, поэтому не надо его делать, ну и поэтому на одну колонку само не спрыгнет, нужен ещё один стиль), но на словах это не так понятно, поэтому вот пример:

.wrapper {
    width: 960px;
    margin: 15px auto;
}

article {
    float: left;
    margin: 10px 0;
    padding: 15px 0;
    height: 70px;
    width: 33.33%; // 
    text-align: center;
    background: #ddd;
}

@media screen and (max-width:960px) {
    .wrapper {
        width: 100%;
        margin: 15px auto;
    }
    article {
        width: 50%;
    }
}

@media screen and (max-width:480px) {
    article {
        width: 100%;
    }
}

В принципе такая градация это по мотивам Bootstrap 3, там сетка немного сложнее :)

0

Всё очень просто - каждый артикль оберните в уникальный div:

    @media only screen and (max-width: 960px),
            {

    #уникальный div1 {
position: absolute;
задать отступ для блока допустим слева в процентах;
        }
        #уникальный div2 {
position: absolute;
задать отступ для блока допустим слева в процентах;
        }
            }

И так высчитать отступы, чтобы поместилось нужное количество блоков.

0

Сделали article ширину в процентах на 33.3% примерно и min-width: 300px;

Дальше делаем wrapper wrapper на 100% или как там нужно. При смене разрешения он будет меняться, и article сжиматься, пока не станет 300, и один article "спрыгнет" вниз. Думаю, понятно.

В крайнем случае возьмите сетку из bootstrap 3.

0

Менять стили при помощи JavaScript, к примеру, я видел где-то такой подход. Вычислив при помощи javascript ширину экрана, можно установить определённый стиль для блоков в обработчике загрузки страницы.

Ваш ответ

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

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