Если опция css3 является опцией, это можно сделать с помощью calc()
функции css .
Случай 1: Оправдывающие блоки на одной строке ( FIDDLE )
Разметка проста - куча элементов с некоторым элементом контейнера.
CSS выглядит так:
div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}
где -1px для исправления ошибки IE9 + calc / округления - смотрите здесь
Случай 2: Оправдывающие блоки на нескольких строках ( FIDDLE )
Здесь, помимо calc()
функции, media queries
необходимы.
Основная идея состоит в том, чтобы настроить медиазапрос для каждого состояния #columns, где я затем использую calc () для определения поля справа для каждого из элементов (кроме элементов в последнем столбце).
Это звучит как большая работа, но если вы используете LESS или SASS, это можно сделать довольно легко
(Это все еще можно сделать с помощью обычного CSS, но тогда вам придется делать все расчеты вручную, а затем, если вы измените ширину вашего бокса - вам придется все заново обрабатывать)
Ниже приведен пример использования LESS: (Вы можете скопировать / вставить этот код здесь, чтобы поиграть с ним, [это также код, который я использовал для генерации вышеупомянутой скрипки])
@min-margin: 15px;
@div-width: 150px;
@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);
@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);
*{margin:0;padding:0;}
.container
{
overflow: auto;
display: block;
min-width: @3divs-width;
}
.container > div
{
margin-bottom: 20px;
width: @div-width;
height: 100px;
background: blue;
float:left;
color: #fff;
text-align: center;
}
@media (max-width: @3divs-width) {
.container > div {
margin-right: @min-margin;
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @3divs-width) and (max-width: @4divs-width) {
.container > div {
margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @4divs-width) and (max-width: @5divs-width) {
.container > div {
margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
}
.container > div:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: @5divs-width) and (max-width: @6divs-width) {
.container > div {
margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
}
.container > div:nth-child(5n) {
margin-right: 0;
}
}
@media (min-width: @6divs-width){
.container > div {
margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
}
.container > div:nth-child(6n) {
margin-right: 0;
}
}
Таким образом, вначале вам нужно определить ширину блока и минимальный размер поля между блоками.
С этим вы можете определить, сколько места вам нужно для каждого штата.
Затем используйте calc () для вычисления правого поля и nth-child, чтобы удалить правое поле из полей в последнем столбце.
Преимущество этого ответа над общепринятом ответ , который использует в text-align:justify
том , что когда у вас есть более чем один ряд коробки - ящики на заключительном подряд не получают «оправданным» , например: если есть 2 коробки , оставшиеся на заключительном ряду - я не нужно, чтобы первый прямоугольник находился слева, а следующий - справа, - скорее, чтобы прямоугольники следовали друг за другом по порядку.
Что касается поддержки браузера : это будет работать в IE9 +, Firefox, Chrome, Safari6.0 + - (см. Здесь для получения более подробной информации). Однако я заметил, что в IE9 + есть некоторая ошибка между состояниями медиа-запросов. [если кто-то знает, как это исправить, мне бы очень хотелось знать :)] <- ИСПРАВЛЕНО ЗДЕСЬ
display:inline-block;
вместо плавания?