Ширина жидкости с равномерно расположенными DIV

См. http://jsfiddle.net/thirtydot/EDp8R/.

• Это работает в IE6 + и во всех современных браузерах!
• Я уменьшил запрошенные вами размеры вдвое, чтобы упростить работу.
• text-align: justify в сочетании с .stretch - вот что обрабатывает позиционирование.
• display:inline-block; *display:inline; zoom:1 исправляет inline-block для IE6 / 7, см. Здесь.
• font-size: 0; line-height: 0 исправляет незначительную проблему в IE6.

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

<div id="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <span class="stretch"></span>
</div>

Дополнительный span (.stretch) можно заменить на :after.

Это по-прежнему работает во всех тех же браузерах, что и вышеупомянутое решение. :after не работает в IE6 / 7, но они все равно используют distribute-all-lines, так что это не имеет значения.

См. http://jsfiddle.net/thirtydot/EDp8R/3/ < / а>

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

<div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

.box1, .box2, .box3, .box4 { ...

#container > div { ...

Это выбирает любой div, который является первым дочерним элементом #container div, и никаких других ниже него. Чтобы обобщить цвета фона, вы можете использовать CSS3 nth-order селектор, хотя он поддерживается только в IE9 + и других современных браузерах:

.box1, .box3 { ...

становится:

#container > div:nth-child(odd) { ...

См. здесь для примера jsfiddle.

Самый простой способ сделать это сейчас - использовать flexbox:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Тогда CSS просто:

#container {
    display: flex;
    justify-content: space-between;
}

демонстрация: http://jsfiddle.net/QPrk3/

Однако в настоящее время это поддерживается только относительно недавними браузерами (http://caniuse.com/flexbox < / а>). Кроме того, несколько раз менялась спецификация макета flexbox, поэтому можно охватить больше браузеров, дополнительно включив старый синтаксис:

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://css-tricks.com/using-flexbox/

Если вариант 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 + calc / округления - см. здесь

Случай 2. Выравнивание полей в нескольких строках (FIDDLE)

Здесь помимо функции calc() необходимы media queries.

Основная идея состоит в том, чтобы настроить медиа-запрос для каждого состояния #columns, где я затем использую calc () для определения margin-right для каждого из элементов (кроме тех, что в последнем столбце).

Это звучит как большая работа, но если вы используете 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 + есть небольшой сбой между состояниями медиа-запросов. [если кто-то знает, как это исправить, мне бы очень хотелось знать :)] ‹- ИСПРАВЛЕНО ЗДЕСЬ

В других сообщениях упоминается flexbox, но если более одной строки items необходимо, свойство space-between flexbox терпит неудачу (см. конец сообщения)

На сегодняшний день единственным чистым решением для этого является использование

CSS Grid Layout Module (Демо Codepen)

В основном соответствующий необходимый код сводится к следующему:

ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: space-between; /* (4) */
  align-content: flex-start; /* (5) */
}

1) Сделайте элемент контейнера контейнером сетки

2) Установите сетку с «автоматическим» количеством столбцов - по мере необходимости. Это сделано для адаптивных макетов. Ширина каждого столбца будет 120 пикселей. (Обратите внимание на использование auto-fit (в отличие от auto-fill), который (для макета с 1 строкой) сворачивает пустые дорожки до 0, позволяя элементам расширяться, чтобы занять оставшееся пространство. (См. эту демонстрацию, чтобы узнать, о чем я говорю)).

3) Установите промежутки / промежутки для строк и столбцов сетки - здесь, поскольку требуется макет «промежуток между», промежуток фактически будет минимальным промежутком, потому что он будет увеличиваться по мере необходимости.

4) и 5) - аналогично flexbox.

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  grid-gap: 1rem;
  justify-content: space-between;
  align-content: flex-start;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  height: 120px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Демо Codepen (измените размер, чтобы увидеть эффект)

Поддержка браузера - Caniuse

В настоящее время поддерживается Chrome (Blink), Firefox, Safari и Edge! ... с частичной поддержкой IE (см. этот пост Рэйчел Эндрю)

NB:

Свойство Flexbox space-between отлично работает для одной строки элементов, но при применении к гибкому контейнеру, который обертывает его элементы - (с flex-wrap: wrap) - дает сбой, потому что у вас нет контроля над выравниванием последней строки элементов; последняя строка будет всегда по ширине (обычно это не то, что вы хотите)

Демонстрировать:

body {
  margin: 0;
}
ul {
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
  
}
li {
  background: tomato;
  width: 110px;
  height: 80px;
  margin-bottom: 1rem;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen (измените размер, чтобы понять, о чем я говорю)

Дополнительная литература по сеткам CSS:

• MDN
• Джен Симмонс - изучение сетки CSS
• Полное руководство по CSS Grid | Справочник Codrops по CSS
• Полное руководство по сетке - хитрости CSS

У меня это сработало с 5 изображениями разных размеров.

1. Создайте контейнер div
2. Неупорядоченный список изображений
3. В css неупорядоченный должен отображаться вертикально и без маркеров
4. Обосновать содержимое контейнера div

Это работает из-за justify-content: space-between, и оно находится в списке, отображаемом по горизонтали.

На CSS

 #container {
            display: flex;
            justify-content: space-between;
 }
    #container ul li{ display:inline; list-style-type:none;
}

В HTML

<div id="container"> 
  <ul>  
        <li><img src="box1.png"><li>
        <li><img src="box2.png"><li>
        <li><img src="box3.png"><li>
        <li><img src="box4.png"><li>
        <li><img src="box5.png"><li>
    </ul>
</div>

в jQuery вы можете настроить таргетинг на Родителя напрямую.

ЭТО ПОЛЕЗНО, ЕСЛИ ВЫ ТОЧНО НЕ ЗНАЕТЕ, СКОЛЬКО ДЕТЕЙ БУДЕТ ДОБАВЛЕНЫ ДИНАМИЧЕСКИ, или ЕСЛИ ВЫ ПРОСТО НЕ МОЖЕТЕ УЗНАТЬ ИХ НОМЕР.

var tWidth=0;

$('.children').each(function(i,e){
tWidth += $(e).width();

///Example: If the Children have a padding-left of 10px;..
//You could do instead:
tWidth += ($(e).width()+10);

})
$('#parent').css('width',tWidth);

Это позволит parent расти по горизонтали по мере добавления children.

ПРИМЕЧАНИЕ. Предполагается, что '.children' имеют значения width и Height.

Надеюсь, это поможет.

Если вы знаете количество элементов в «строке» и ширину контейнера, вы можете использовать селектор, чтобы добавить поля к элементам, которые вам нужны, чтобы вызвать оправданный вид.

У меня были строки из трех div, которые я хотел оправдать, поэтому использовал:

.tile:nth-child(3n+2) { margin: 0 10px }

это позволяет центральному div в каждой строке иметь поле, которое заставляет 1-й и 3-й div выходить на внешние края контейнера.

Также отлично подходит для других вещей, таких как цвета фона границ и т. Д.