Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.55/40: Рейтинг темы: голосов - 40, средняя оценка - 4.55
1 / 1 / 0
Регистрация: 01.04.2016
Сообщений: 341
1

При уменьшении экрана браузера блок уходит за левый край экрана

05.07.2017, 11:35. Просмотров 7603. Ответов 14
Метки нет (Все метки)


left 50% и margin-left:-width/2

при уменьшении экрана браузера уходит за левый край экрана. как этого избежать?
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.07.2017, 11:35
Ответы с готовыми решениями:

При уменьшении экрана браузера div плавно уходит за левый край окна
Привет всем! Подскажите пожалуйста как с помощью css можно реализовать действие карусели (или...

Блок с background при масштабировании уходит за левый край экрана
Помогите разобраться, <div class="sity"></div> имеет background и при масштабировании уходит за...

Блок уходит за правый край экрана
Подскажите пожалуйста по скрину. Тот блок что я обвёл красной рамкой. Почему он уходит за края? Вся...

Содержимое уходит за пределы блока div при уменьшении масштаба экрана
Господа, добрый день! При уменьшении масштаба экрана содержимое блока <div class="content">...

14
Эксперт HTML/CSS
1322 / 1103 / 482
Регистрация: 07.08.2016
Сообщений: 3,041
05.07.2017, 17:32 2
Убрать минус перед значением?
0
1 / 1 / 0
Регистрация: 01.04.2016
Сообщений: 341
05.07.2017, 21:09  [ТС] 3
вы тролль или просто плохо понимаете смысл? центрирование это
0
Эксперт HTML/CSS
1322 / 1103 / 482
Регистрация: 07.08.2016
Сообщений: 3,041
05.07.2017, 21:40 4
Извиняюсь, не сразу понял что вы написали, но вам тоже следовало бы приложить нормальный кусок кода, а не то что есть.
Уходит скорее всего потому что ширины экрана не хватает, т.е. left 50% сместило левый край элемента в центр, затем отрицательным маржином мы смещаем элемент влево, и расстояние от левого края окна до элемента при уменьшении экрана становиться меньше чем смещение. Маржин ведь задан жестко, и ему пофиг что позиционированием мы смещаем элемент, он его сдвигает как ему сказано.
Почему кстати не использовать text-align?
0
1 / 1 / 0
Регистрация: 01.04.2016
Сообщений: 341
10.07.2017, 10:57  [ТС] 5
ничего не понял. может кто нибудь другой поможет?
0
Эксперт HTML/CSS
1322 / 1103 / 482
Регистрация: 07.08.2016
Сообщений: 3,041
10.07.2017, 12:42 6
Смотрите, допустим ширина экрана 900 пикселей, ширина блока который мы ставим по центру 400 пикселей,
соответственно margin-left мы прописываем -200 пикселей. Теперь от краев блока до левого и правого края экрана 250 пикселей. Когда мы уменьшаем экран у нас так-же уменьшается расстояние от края экрана до блока. Вот стал экран 800 пикселей, соответственно left:50% сместило наш блок на 400 пикселей вправо, а margin-left на 200 пикселей влево, расстояние между блоком и краем экрана стало 200 пикселей.
Уменьшаем экран дальше.
Экран 400 пикселей, left:50% сместило наш блок на 200 пикселей вправо, но и margin-left у нас смещает блок на 200 пикселей влево, расстояние между блоком и краем экрана стало 0.
Еще уменьшаем экран, ширина 300 пикселей, left:50% сместило наш блок на 150 пикселей вправо, а вот margin-left пытается сдвинуть блок на 200 пикселей влево, но у нас нет этих 200 пикселей, у нас всего 150, поэтому отрицательный маржин вытягивает блок за пределы экрана. Надеюсь так понятнее
0
1 / 1 / 0
Регистрация: 01.04.2016
Сообщений: 341
10.07.2017, 13:25  [ТС] 7
да вы что! просто поразительно. Никогда бы не догадался бы что именно поэтому.
0
Эксперт HTML/CSS
1322 / 1103 / 482
Регистрация: 07.08.2016
Сообщений: 3,041
10.07.2017, 13:44 8
Ну если вы хотите конкретный ответ, то смотрите второе сообщение в этой теме. Не будет отрицательного маржина - не будет уезжать за край. Хотя вам же тот ответ не понравился почему то.
ЗЫ: Если вы все знаете зачем задаете вопросы?
0
1 / 1 / 0
Регистрация: 01.04.2016
Сообщений: 341
10.07.2017, 15:39  [ТС] 9
как сделать центрирование с position absolute но чтобы останавливалось у левого края?
0
28 / 28 / 8
Регистрация: 23.12.2015
Сообщений: 97
10.07.2017, 17:52 10
напишите полный код блока и получите помощь
PS. сейчас лето, гадалки все на моря уехали на заработки
0
Эксперт HTML/CSS
1322 / 1103 / 482
Регистрация: 07.08.2016
Сообщений: 3,041
10.07.2017, 19:29 11
HTML5
1
2
3
<div class="outer">
<div class="inner"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.outer{position: relative;
  background: #f00;
  width: 100vw;
  height: 100vh;
}
.inner{
  background: #ff0;
  width: 200px;
  height: 200px;
  margin:auto;
  position: absolute;
  left:0;
  right: 0;
}
ширину внутреннего блока можно задать в процентах, тогда тоже будет сжиматься.
песочница
1
1 / 1 / 0
Регистрация: 01.04.2016
Сообщений: 341
10.07.2017, 21:54  [ТС] 12
да. вроде оно. спасибо!

Добавлено через 31 минуту
хотя нет, не совсем. ведь там стоит margin:auto - это он без никакого внешнего дива и так будет верно работать.
но похоже тут ведь не будет реакции на left right -то есть при таком центрировании мы не можем его "двигать туда-сюда"
а может можно как то сделать именно с left 50% и margin - left чтобы не уходил?
0
28 / 28 / 8
Регистрация: 23.12.2015
Сообщений: 97
10.07.2017, 23:40 13
вам шашечки нужны или ехать?
0
Эксперт HTML/CSS
1322 / 1103 / 482
Регистрация: 07.08.2016
Сообщений: 3,041
10.07.2017, 23:50 14
Лучший ответ Сообщение было отмечено Atarion как решение

Решение

Я маленько не понял, если блок нужен по центру, то зачем его еще двигать куда-то? но если уж так необходимо то просто меняем значение left или right, в зависимости от того куда нужно сдвинуть и блок будет двигаться в нужную сторону от центра.
А с отрицательными маржинами всегда есть опасность что блок уедет, впрочем как и вообще с жестко заданными размерами, тут или в процентах задавать или через медиа запросы уменьшать размеры
1
1 / 1 / 0
Регистрация: 01.04.2016
Сообщений: 341
11.07.2017, 10:10  [ТС] 15
да вроде сдвигается, благодарю.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.07.2017, 10:10

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Почему маркер уходит за край экрана?
Если сделать padding-left меньше 8 пикселей, то маркер уходит за край экрана. Вот почему так...

В Bootstrap не нажимаются ссылки при уменьшении окна браузера (экрана устройства)
Тестовый домен рабочего сайта: belakb.ru Я поменял дизайн сайта из одноколоночного представления...

Блок наезжает на блок с товарами из бд при уменьшении экрана
при уменьшении экрана текст наезжает на товары из бд. фиксированную высоту ставить для блока pr не...

При уменьшении экрана меню закрывает следующий блок. Как исправить?
Есть шапка меню на bootstrap. При уменьшении экрана меню расширяется и скрывает следующий за ней...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.