Ширина рідини з однаково розташованими DIV

У мене є контейнер з рідиною шириною DIV.

В рамках цього у мене є 4 DIV, всі 300px x 250px ...

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

Я хочу, щоб це ставилося в поле 1, щоб плаваючий ліворуч, вікно 4 було плаваючи праворуч, а вікна 2 і 3 розташовувались рівномірно між ними. Я хочу, щоб інтервал був також текучим, щоб браузер зменшився, простір також стане меншим.

Дивіться: http://jsfiddle.net/thirtydot/EDp8R/

• Це працює в IE6 + та всіх сучасних браузерах!
• Я вдвічі скоротив запитувані розміри, щоб полегшити роботу.
• text-align: justifyв поєднанні з .stretchтим, що обробляє позиціонування.
• display:inline-block; *display:inline; zoom:1виправлення inline-blockIE6 / 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/

Є незначний мінус :after: щоб останній рядок бездоганно працював у Safari, потрібно бути обережним із пробілом у HTML.

Зокрема, це не працює:

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

І це робить:

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

Ви можете використовувати це для будь-якої довільної кількості дочірніх divбез додавання boxNкласу до кожного, змінюючи

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

до

#container > div { ...

Це вибирає будь-який div, який є першим дочкою #containerдіва, і жодних інших під ним. Для узагальнення кольорів фону можна використовувати селектор CSS3 n-го порядку , хоча він підтримується лише в 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: Вирівнювальні поля в одному рядку ( ПІДТВЕРДЖЕНО) )

Розмітка проста - купа дівок з деяким елементом контейнера.

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необхідні.

Основна ідея полягає у встановленні медіа-запиту для кожного стану # Column, де я використовую calc () для опрацювання правого поля на кожному з елементів (крім тих, що знаходяться в останньому стовпці).

Це звучить як велика робота, але якщо ви використовуєте Менше або SASS, це можна зробити досить легко

(Це все ще можна зробити з звичайним css, але тоді вам доведеться робити всі обчислення вручну, і тоді, якщо ви зміните ширину поля, вам доведеться все відпрацювати знову)

Нижче наведено приклад використання МЕНШЕ: (Ви можете скопіювати / вставити цей код сюди, щоб грати з ним, [це також код, який я використовував для створення вищезгаданої скрипки])

@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 , але якщо більш ніж один ряд елементів необхідний , Flexbox в space-betweenвласності не вдається (див кінця поста)

На сьогодні єдине чисте рішення для цього - це з

Модуль компонування сітки CSS ( демонстрація 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) - Подібно до флексбоксу.

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 демонстрація (Змініть розмір, щоб побачити ефект)

Підтримка браузера - Канюза

На даний момент підтримуються Chrome (Blink), Firefox, Safari та Edge! ... з частковою підтримкою IE (Дивіться цю публікацію Рейчел Ендрю)

Примітка:

Властивість 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 Reference
• Повне керівництво по Grid - CSS Tricks

Це працювало для мене з 5 зображеннями в різних розмірах.

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

Це працює через виправдовувальний контент: пробіл між, і це у списку, відображається горизонтально.

На 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'мають a widthі HeightSet

Сподіваюся, що це допомагає.

Якщо ви знаєте кількість елементів на "рядок" і ширину контейнера, ви можете використовувати селектор, щоб додати поле до елементів, які вам потрібні, щоб викликати виправданий вигляд.

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

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

це дозволяє центральному div у кожному рядку мати поле, яке примушує 1-й та 3-й поділки до зовнішніх країв контейнера

Також чудово підходить для інших речей, таких як кольори тла рамки тощо