Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 14.11.2018, 14:24   #1
Санеккк
Форумчанин
 
Регистрация: 06.11.2013
Сообщений: 80
Репутация: 32
По умолчанию [РЕШЕНО] Как равномерно и по ширине распределить блоки со свойством display:inline-block внутри внешнего блока?

Привет!
Есть несколько дивов внутри общего дива. Внутренние дивы расположены со свойством "display: inline-block". Если увеличить масштаб страницы, то не умещающиеся в ряд блоки переносятся вниз. Если уменьшить масштаб страницы, то блоки находятся рядом и уменьшаются.
Требуется: при уменьшении масштаба страницы увеличивать расстояние между блоками, чтобы они равномерно распределялись по всей ширине страницы.
Подскажите, пожалуйста, как это можно сделать?

Код:

<div>

<div style="display: inline-block; vertical-align: top; width: auto;">
123
</div>

<div style="display: inline-block; vertical-align: top; width: auto;">
456
</div>

<div style="display: inline-block; vertical-align: top; width: auto;">
789
</div>

<div style="display: inline-block; vertical-align: top; width: auto;">
999
</div>

</div>

Изображения
Тип файла: png треб.png (17.2 Кб, 1 просмотров)

Последний раз редактировалось Вадим Мошев; 14.11.2018 в 14:39.
Санеккк вне форума   Ответить с цитированием
Старый 14.11.2018, 14:38   #2
Вадим Мошев
гигаМодератор :)
Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 8,004
Репутация: 3920
По умолчанию

Предположим у вас код:
Код:

<div class="wrapper">
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
</div>

CSS пишите такой

Код:

.wrapper{
	text-align: justify;
}

.block {
	display: inline-block;	
}

.wrapper:last-child {
	width: 100%
}

p.s.
Пожалуйста, оформляйте Ваш код согласно правилам.
Вадим Мошев вне форума   Ответить с цитированием
Старый 18.11.2018, 01:37   #3
Санеккк
Форумчанин
 
Регистрация: 06.11.2013
Сообщений: 80
Репутация: 32
По умолчанию

Вадим Мошев, большое спасибо!

С псевдоклассом не сработало, вероятно, слишком замудрен реальный код. Создал просто в конце "wrapper" пустой див, которому в html задал width=100%.

Спасибо!
Санеккк вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[РЕШЕНО] Нужна помощь с display:inline и inline-block; Bugerman21 HTML и CSS 2 26.06.2017 09:10
[РЕШЕНО] Помогите разобраться в inline-block Alex-2 HTML и CSS 5 16.02.2017 18:29
Как обойти display:block !important ? Capoeirista HTML и CSS 3 13.03.2016 01:57
Проблема с display: inline-block KaMaKaDzA HTML и CSS 1 12.03.2016 00:19
Display block не block mrgrudge HTML и CSS 2 25.12.2010 12:10


05:39.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru