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

Question

[mishapsv]

Здравствуйте!
Нужно, чтобы текст в левой колонке прижимался к левой стороне, текст в правой - к правой (внутри выравнивание должно быть по левому краю).
А расстояние м/у текстом остальных колонок было равномерное распределено.
Приложил схему.

Answer 1

[Евгений Петров]

Идеально для таких случаев подходит 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;
}

Comments

[mishapsv]

Евгений Петров Спасибо! чуть дополнил jsbin.com/buhidasesu/2

[mishapsv]

jsbin.com/buhidasesu/2/edit?html,css,output

Answer 2

[Viktor Vsk]

В чем проблема?

Comments

[mishapsv]

Виктор Ablebeam Не понятно, как установить паддинг(марджин?) между колонками, который будет изменяться в зависимости от размера самой длинной строки в каждой колонке.
Переносов на новую строку быть не должно (пока хватает ширины колонны).

Answer 3

[Дмитрий Шинкарь]

Можно div-вами, можно таблицами...)