Изменение порядка блоков div с помощью float

Question

На странице, с которой я сейчас работаю, есть контейнер с жидкостью.

Он может изменить размер до ширины экрана, если ширина окна превышает 960 пикселей, если ниже 960 пикселей, он останется фиксированным на уровне 960 пикселей Это предназначено для пользователей с большими экранами.

У меня есть три списка для отображения:

<div id="list1" style="float:left;width:500px">...</div>
<div id="list2" style="float:left;width:500px">...</div>
<div id="list3" style="float:left;width:500px">...</div>

Но вы хотите заказать их по-другому, если размер контейнера превышает 1000 пикселей.

Я пытался применить clear без удачи. Есть ли способ добиться следующего без использования JavaScript?

Answer 1

Самый простой способ сделать это - использовать медиазапросы CSS.

Если ширина 960 или меньше, не используйте их.

если оно больше 960, float list1 и list3 для left и float list 2 для right.

1011 * т.е. *

<div id="list1"></div>
<div id="list2"></div>
<div id="list3"></div>​

и КСС

#list1 {
    background: #202020;
    height: 50px;
}
#list2 {
    background: #404040;
    height: 150px;
}
#list3 {
    background: #606060;
    height: 50px;
}

@media (min-width: 960px){
    #list1 {
        width: 50%;
        float: left;    
    }
    #list2 {
        width: 50%;
        float:right;   
    }    
    #list3 {
        width: 50%;
        float: left;
    }
}​

см. http://jsfiddle.net/8ZVhS/ для демонстрации.

Answer 2

Я не думаю, что это возможно без помещения отрицательного margin-top в # list3, если только вы не используете JS для получения динамической высоты # list2