WedX - журнал о программировании и компьютерных науках

Max-width меняет положение: фиксированное поле

У меня возникла проблема с правильным выравниванием div в правой части браузера после того, как окно просмотра достигло максимальной ширины.

Этот Codepen показывает проблему.

Проблемный div — это .rghtlogo, который, несмотря на то, что область просмотра браузера меньше 1200 пикселей (максимальная ширина тела), правильно позиционируется с правым углом: 4%

Однако, когда окно просмотра браузера становится больше 1200 пикселей, оно сдвигает поле на 4% от внутреннего правого края контейнера body, а не в браузере.

Я безуспешно пытался обернуть его в div с абсолютным позиционированием, безуспешно пытался плавать .rghtlogo и в основном прибегал к действительно небрежному нежелательному обходному пути, используя несколько медиа-запросов, чтобы в основном изменить поле по мере того, как браузер становится больше. Однако это действие не плавное.

@media (min-width:1201px){.rghtlogo{margin-right:3% !important}}
@media (min-width:1216px){.rghtlogo{margin-right:1.5% !important}}
@media (min-width:1230px){.rghtlogo{margin-right:.75% !important}}
@media (min-width:1251px){.rghtlogo{margin-right:0% !important}}
@media (min-width:1256px){.rghtlogo{margin-right:-1% !important}}

Я безрезультатно искал, как это исправить. Любая помощь приветствуется.

javascript css
12.11.2014

Ответы:


1

Замените position:fixed на position:relative в .rghthdr
и измените top и right в .rghtlogo на -250px и 0 соответственно.

Таким образом, .rghtlogo всегда располагается относительно .rghthdr.
См. этот обновленный codepen: https://codepen.io/yogeshkhatri/pen/NPKQZg

12.11.2014

2

Измените position:fixed на position:relative в .rghthdr и измените top и right в .rghtlogo на -250px и 0 соответственно. Так что .rghtlogo всегда позиционируется относительно .rghthdr

Это фактически убивает функцию javascript. Спасибо! Я в конце концов понял это.

Это действительно глупо, я понял, что мой .nav div, который является контейнером для всего заголовка, был установлен на ширину 100%, но установлен с полями 2,5%. Как только я изменил его на ширину: 95%, все было исправлено.

12.11.2014
Новые материалы
Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Для любых предложений по сайту: [email protected]