Если css3 является опцией, это можно сделать с помощью функции css calc().
Случай 1: Обоснование блоков в одной строке ( FIDDLE )
Разметка проста - набор элементов div с некоторым элементом контейнера.
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 + - см. здесь
Случай 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 + между мультимедиа есть некоторый сбойзапрашивать состояния.[если кто-то знает, как это исправить, мне бы очень хотелось знать :)] <- ИСПРАВЛЕНО <a href="https://stackoverflow.com/q/16658482/703717"> ЗДЕСЬ