CSS: Position: Absolute Right без горизонтальной прокрутки - PullRequest
Новая
       1

CSS: Position: Absolute Right без горизонтальной прокрутки

1 голос
/ 09 марта 2011

У меня есть демо-версия этого макета здесь: http://jsfiddle.net/LwRva/

Я пытаюсь добиться макета шириной 680 пикселей для большинства пользователей, но только 480 пикселей - без горизонтальной полосы прокрутки для тех, кто использует меньшее разрешение. (Представьте, что 680px - это на самом деле 1180px, а 480px - 980px - просто для использования в JSFiddle.)

По сути, это макет div с 3 столбцами, в котором левый и правый столбцы скрыты, если страница не помещается на них.

У меня уже есть левая колонка, работающая точно так, как я хочу, она не изменяет горизонтальную полосу прокрутки, если она не помещается на странице. Моя проблема с правой колонкой. Из-за того, что отрицательное поле-право не работает таким же образом.

Есть идеи?

1 Ответ

1 голос
/ 09 марта 2011

@ RoToRa подходит для СМИ. Возможные варианты CSS для вашего макета могут быть следующими: 

@media screen and (max-width: 580px) {.featured-box-left {display:none} }
@media screen and (max-width: 480px) {
.featured-box-left,.featured-box-right{display:none;}
}

Если ширина экрана составляет 580 пикселей, то скрыть .featured-box-left. Если экран размером 480px или ниже, скрыть как левый, так и правый.

Демо: http://jsfiddle.net/LwRva/6/

Обычно то, что вы пытаетесь достичь - это звоните Отзывчивый веб-дизайн . У List Apart есть отличная статья, которую вы можете найти информативно: http://www.alistapart.com/articles/responsive-web-design/

...