Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
0 / 0 / 0
Регистрация: 07.11.2016
Сообщений: 90

Выравнивание блочных элементов

10.12.2018, 00:27. Показов 1082. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте! Как мне сделать выравнивание блочных элементов, чтобы было как на картинке: первый элемент - слева, второй - по середине браузера, третий - справа? Пробую разными свойствами: и display, и position - не получается. И надо ли во втором div создавать так много span(ов) или можно сделать проще без них? Спасибо.
Миниатюры
Выравнивание блочных элементов  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
10.12.2018, 00:27
Ответы с готовыми решениями:

Выравнивание по центру блочных элементов с float left
Попал в такую затруднительную ситуаций. Генерирую из массива матрицу, дошло дело до дизайна и сразу возник вопрос. задача такая: ...

Позиционирование блочных элементов
Всем доброго времени суток. Стокнулся с проблемой: у меня в body есть article и aside, хочу, чтобы они располагались в одну линию. Вроде...

Поведение блочных элементов
Добрый день! Какие причины могут быть у того что блоки налезают друг на друга при условии что с размерами отступами все нормально. Разве по...

3
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
10.12.2018, 04:03
Вот каркас - наполняйте - https://codepen.io/qwerty_wasd/pen/roNvYm
HTML5
1
2
3
4
5
<div class="module-header-top">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
html,
body {
  width: 100%;
}
 
.module-header-top {
  border: 2px solid #000000;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.module-header-top .item {
  display: inline-block;
  border: 2px solid #000000;
  height: 100px;  /* уберите  height и width */
  width: 100px;  /* и наполняйте .item контентом */
}
1
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2379 / 1739 / 677
Регистрация: 07.08.2016
Сообщений: 4,093
10.12.2018, 09:46
Qwerty_Wasd, приветствую! А зачем display: inline-block; для .module-header-top .item? Они в флекс модели все-равно ведь блоковые.
1
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
10.12.2018, 16:46
AlexZaw, здравствуй Да все верно - просто привычка)) Но ты прав, это было ни к чему.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
10.12.2018, 16:46
Помогаю со студенческими работами здесь

Стилизация блочных элементов
Имеется определенный кусок кода. &lt;div id=&quot;page&quot;&gt; &lt;h1&gt;Heading Title&lt;/h1&gt; &lt;h2&gt;Subheading Title&lt;/h2&gt; &lt;h2&gt;Subheading...

CSS! Верстка блочных элементов
CSS! Как делать максимально совместимую верстку сайта(блочных элементов) для всех браузеров и разрешений экрана?

Правила использования строчных и блочных элементов
Доброго времени. Появился такой вот скользкий вопрос. Не секрет, что блочный элемент нельзя сунуть внутрь строчного. Тоесть нельзя...

Проблема схлопывающихся отступов блочных элементов
Марджин ребенка ведь это отступ от границы родительского элемента. Тогда почему вот здесь марджин ребенка устанавливает отступ от body ...

Использование свойства inline для блочных элементов
Доброго времени суток, уважаемые форумчане! Столкнулся с проблемой при использовании свойства inline. В шапке я применил его к каждому...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru