Динамические отступы в блоке
Есть конструкция
<style>.content {width:100%}
<div class="content">содержимое</div>
Как сделать такое? Логику понимаю, в js знания стремятся к нулю :( Логика работы Внутри блока content есть содержимое для которого необходимо установить равные отступы слева и справа в зависимости от ширины окна браузера Событие должно работать при изменении размеров окна. Window.resize Алгоритм выравнивания такой 1.Получаем ширину Content (вероятно InnerWidth) 2.Получаем ширину окна(Window) 3.Переменная1 = Ширина окна - Ширина Content 4.Переменная2 = Переменная1 / 2 5.Присваиваем блоку Content значения CSS Padding-left:Переменная2;Padding-right:Переменная2; |
для этого достаточно css
|
Цитата:
|
<style>
.content{
margin: 0 20%;
text-align: center;
border: 1px solid red;
}
</style>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, voluptas, repellendus.
Minima repellat deserunt veritatis, provident a illo labore numquam nam nesciunt cumque.
Perspiciatis nihil, repudiandae blanditiis molestias consequatur quia.500</div>
|
Цитата:
|
Это не то что нужно совершенно. т.к. при разных разрешениях экрана 20% будут разные, а содержимое блока Content грубо говоря статическую ширину.
т.е. ну к примеру ширина экрана 1000,Content занимает постоянно 800. Отступы ставим в процентах, их нужно в процентах, т.к. 1000 динамическая величина. Соотвественно padding:10%, но как только ширина экрана увеличивается или уменьшается то padding 10% становится некорректным значением. Вот для этого и нужен описаный мной алгоритм. Вы можете дать пример на JS? |
<style>
.content{
width: 800px;
margin: 0 auto;
text-align: center;
border: 1px solid red;
}
</style>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, voluptas, repellendus.
Minima repellat deserunt veritatis, provident a illo labore numquam nam nesciunt cumque.
Perspiciatis nihil, repudiandae blanditiis molestias consequatur quia.500</div>
вам хоть базовые знания по css надо приобрести |
Не работает text-align, не с Important и вообще никак. bootstrap justify тоже не работает.. Вы можете показать пример на JS? Если нет, то вы лично врядли сможете мне помочь
|
text-align - это только для текста, а не для блока content
margin: 0 auto; - ставит Ваш блок в середину окна. Вот пример от j0hnik он рабочий. https://jsfiddle.net/bsawn/ujota35k/ |
| Часовой пояс GMT +3, время: 02:56. |