Ширина жидкости с равноотстоящими DIV

Ответ 1

Смотрите: 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>

Ответ 2

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

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

Затем CSS просто:

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

demo: http://jsfiddle.net/QPrk3/

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

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

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

Ответ 3

Если параметр css3 - это опция, это можно сделать с помощью функции css calc().

Случай 1: Обоснование полей на одной строке (FIDDLE)

Разметка проста - куча divs с некоторым элементом контейнера.

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/rounding - см. здесь

Случай 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 + есть немного сбой между состояниями медиа-запросов. [если кто-то знает, как исправить это, я действительно хотел бы знать:)] < - FIXED ЗДЕСЬ

Ответ 4

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

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

CSS 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), который (для однострочного макета) сворачивает пустые дорожки в 0 - позволяет деталям расширяться, чтобы занять оставшееся пространство. (Проверьте a href= "https://codepen.io/danield770/pen/GOQZoQ?editors=1100" rel= "nofollow noreferrer" > эта демонстрация, чтобы узнать, о чем я говорю)).

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>

Ответ 5

в 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 Set

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

Ответ 6

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

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

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

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

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

Ответ 7

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

• Создать контейнер div
• Неупорядоченный список изображений
• В css неуправляемый должен отображаться вертикально и без палитр
• Оправьте содержимое контейнера 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>

Ответ 8

центрируйте контейнер div с полем 0 auto, а затем добавьте маржу слева к box2 и поле справа от поля 3 для вашего желаемого пространства

#container { width:1200px; margin:0 auto; }
#container div { width:300px; height:250px; float:left; }
.box2 { margin-left:10px; }
.box3 { margin-right:10px; }

Таким образом, все divs внутри контейнера бок о бок и с полем вы можете контролировать расстояние между divs