Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.11.2018, 16:06
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 37

Динамические отступы в блоке
Есть конструкция
<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;
Ответить с цитированием
  #2 (permalink)  
Старый 16.11.2018, 16:15
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,381

для этого достаточно css
Ответить с цитированием
  #3 (permalink)  
Старый 16.11.2018, 16:20
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 37

Сообщение от j0hnik Посмотреть сообщение
для этого достаточно css
Можно пример на CSS в таком случае? я не знаю валидного способа это сделать, тем более в динамике
Ответить с цитированием
  #4 (permalink)  
Старый 16.11.2018, 16:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,381

<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>
Ответить с цитированием
  #5 (permalink)  
Старый 16.11.2018, 16:27
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,381

Сообщение от oslayer
тем более в динамике
да-да, css так и работает
Ответить с цитированием
  #6 (permalink)  
Старый 16.11.2018, 17:00
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 37

Это не то что нужно совершенно. т.к. при разных разрешениях экрана 20% будут разные, а содержимое блока Content грубо говоря статическую ширину.
т.е. ну к примеру ширина экрана 1000,Content занимает постоянно 800.
Отступы ставим в процентах, их нужно в процентах, т.к. 1000 динамическая величина. Соотвественно padding:10%, но как только ширина экрана увеличивается или уменьшается то padding 10% становится некорректным значением. Вот для этого и нужен описаный мной алгоритм. Вы можете дать пример на JS?
Ответить с цитированием
  #7 (permalink)  
Старый 16.11.2018, 17:05
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,381

<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 надо приобрести
Ответить с цитированием
  #8 (permalink)  
Старый 16.11.2018, 17:15
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 37

Не работает text-align, не с Important и вообще никак. bootstrap justify тоже не работает.. Вы можете показать пример на JS? Если нет, то вы лично врядли сможете мне помочь
Ответить с цитированием
  #9 (permalink)  
Старый 22.11.2018, 19:11
Интересующийся
Отправить личное сообщение для BSwan Посмотреть профиль Найти все сообщения от BSwan
 
Регистрация: 24.03.2017
Сообщений: 11

text-align - это только для текста, а не для блока content
margin: 0 auto; - ставит Ваш блок в середину окна.
Вот пример от j0hnik он рабочий.

https://jsfiddle.net/bsawn/ujota35k/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Убрать отступы в блоке Asperant (X)HTML/CSS 2 26.09.2017 17:07
Работа скрипта в на конкретном блоке BigNewGod jQuery 4 30.08.2017 16:03
Как сделать ограничение на количество элементов в блоке с .droppable aslan2030 jQuery 2 10.03.2017 17:41
Две функции в блоке <div> Helly Элементы интерфейса 3 12.04.2013 11:51
эффект при наведении tina jQuery 21 16.11.2012 20:12