@mishapsv

Как реализовать такае размещение текста в колонка?

Здравствуйте!
Нужно, чтобы текст в левой колонке прижимался к левой стороне, текст в правой - к правой (внутри выравнивание должно быть по левому краю).
А расстояние м/у текстом остальных колонок было равномерное распределено.
Приложил схему.
ae0695a1e22b4c8da2a8710f1bd02203.png
  • Вопрос задан
  • 237 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Идеально для таких случаев подходит flex — ведь эта модель представления и разработана именно для гибких сеток. Для старых webkit и не совсем старых IE нужно смотреть старый синтаксис.

HTML (допустим, 5 колонок)
<div class="menu">
	<div class="menu-item">...</div>
	<div class="menu-item">...</div>
	<div class="menu-item">...</div>
	<div class="menu-item">...</div>
	<div class="menu-item">...</div>
</div>

Вариант с фиксированной шириной
.menu {
	display: flex;
	justify-content: space-between;
}
.menu-item {
	flex-basis: 15%;
}

Вариант с фиксированным расстоянием между колонками
.menu {
	display: flex;
	justify-content: space-between;
}
.menu-item:nth-child(n + 2) {
	margin-left: 30px;
}

Для совсем старых ослов есть полифилл, но только для фиксированной ширины
Добро пожаловать в АД
.menu {
	text-align: justify;
	text-justify: newspaper;
	font-size: 0;
}
.menu:after {
	content: "";
	display: inline-block;
	width: 100%;
}
.menu-item {
	display: inline-block;
	width: 15%;
	font-size: 1rem;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
viktorvsk
@viktorvsk
В чем проблема?
Ответ написан
DeadCowsDontMoo
@DeadCowsDontMoo
web
Можно div-вами, можно таблицами...)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
24 апр. 2024, в 20:24
10000 руб./за проект
24 апр. 2024, в 19:51
1000 руб./за проект