Szerokość płynu z równomiernie rozmieszczonymi Div-ami

Najprostszym sposobem na to jest teraz flexbox:

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

CSS jest wtedy po prostu:

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

Demo: http://jsfiddle.net/QPrk3/

Jednak , jest to obecnie obsługiwane tylko przez stosunkowo najnowsze przeglądarki ( http://caniuse.com/flexbox ). Ponadto Specyfikacja układu flexbox zmieniła się kilka razy, więc możliwe jest pokrycie większej liczby przeglądarek, dodając dodatkowo starsza składnia:

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

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

Jeśli css3 jest opcją, można to zrobić za pomocą funkcji css calc().

Przypadek 1: uzasadnienie pola na jednej linii (} FIDDLE )

Znaczniki są proste - kilka div z jakimś elementem kontenera.

CSS wygląda tak:

div
{
    height: 100px;
    float: left;
    background:pink;
    width: 50px;
    margin-right: calc((100% - 300px) / 5 - 1px); 
}
div:last-child
{
    margin-right:0;
}

Gdzie -1px {[20] } aby naprawić błąd IE9 + calc / zaokrąglanie-zobacz proszę.

Przypadek 2: uzasadnianie pól na wielu liniach ( )

Tutaj, oprócz calc() Funkcja, media queries są niezbędne.

Podstawową ideą jest skonfigurowanie zapytania o media dla każdego stanu #columns, gdzie następnie używam calc () do ustalenia margin-right na każdym z elementów (z wyjątkiem tych w ostatniej kolumnie).

To brzmi jak dużo pracy, ale jeśli używasz LESS lub SASS, można to zrobić dość łatwo

(nadal można to zrobić za pomocą zwykłego css, ale wtedy będziesz musiał wykonać wszystkie obliczenia ręcznie , a jeśli zmienisz szerokość pola-musisz work out everything again)

Poniżej znajduje się przykład użycia LESS: (możesz skopiować/wkleić ten kod proszę. aby się nim bawić, [jest to również kod, którego użyłem do wygenerowania wyżej wymienionych skrzypiec])

@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;
    }
}

Więc w zasadzie najpierw musisz zdecydować o szerokości pudełka i minimalnym marginesie, który chcesz między pudełkami.

Dzięki temu możesz określić, ile miejsca potrzebujesz dla każdego stanu.

Następnie użyj calc (), aby obliczyć prawy margines, a nth-child, aby usunąć prawy margines od pól w końcowej kolumnie.

Przewaga tej odpowiedzi nad zaakceptowaną odpowiedzią, która używa text-align:justify jest taka, że gdy masz więcej niż jeden rząd pól-Pola w ostatnim rzędzie nie są 'justowane' np: jeśli w ostatnim rzędzie pozostały 2 pola-nie chcę, aby pierwsze pole było po lewej, a następne po prawej-ale raczej, że pola następują po sobie w kolejności.

Odnośnie wsparcia przeglądarki : to będzie działać na IE9+, Firefox, Chrome, Safari6. 0+ - (zobacz proszę. Po Więcej Szczegółów) zauważyłem jednak, że na IE9+ jest trochę usterki między Stanami zapytań o media. [jeśli ktoś wie jak to naprawić to bardzo chciałbym wiedzieć :) ] HERE

Inne posty wspominały flexbox, ale jeśli potrzeba więcej niż jednego wiersza pozycji, właściwość flexbox space-between nie powiedzie się (patrz koniec postu)

Do tej pory, jedynym czystym rozwiązaniem dla tego jest

CSS Grid Layout Module (codepen demo )

W zasadzie odpowiedni kod niezbędny sprowadza się do tego:

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) Uczyń element kontenera kontenerem siatki

2) Ustaw siatkę z "auto" ilość kolumn-w razie potrzeby. Odbywa się to w przypadku układów responsywnych. Szerokość każdej kolumny będzie wynosić 120px. (Zwróć uwagę na użycie auto-fit (jak przystało na auto-fill), które (dla układu 1-rzędowego) zwija puste ścieżki do 0 - pozwalając elementom rozwinąć się, aby zająć pozostałą przestrzeń. (sprawdź To demo żeby zobaczyć o czym mówię)).

3) Ustaw szczeliny / rynny dla wierszy i kolumn siatki-tutaj, ponieważ chcesz' odstęp między ' układ-szczelina będzie rzeczywiście być minimalna Luka ponieważ będzie rosnąć w razie potrzeby.

4) i 5) - podobne do 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 demo (Zmień rozmiar, aby zobaczyć efekt)

Obsługa Przeglądarki - Caniuse

Obecnie obsługiwane przez Chrome (Blink), Firefox, Safari i Edge! ... z częściowym wsparciem ze strony IE (Zobacz ten post przez Rachel Andrew)

NB:

Flexbox ' S space-between właściwość działa świetnie dla jednego wiersza elementów, ale gdy zostanie zastosowana do kontenera flex, który zawija jego elementy - (z flex-wrap: wrap) - nie powiedzie się, ponieważ nie masz kontroli nad wyrównaniem ostatniego wiersza elementów; ostatni wiersz zawsze będzie uzasadniony (zwykle nie to, czego chcesz)

Aby zademonstrować:

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 (Resize to see what I ' m talking about)

Czytaj dalej CSS siatki:

• MDN
• Jen Simmons-Learn CSS grid
• A Complete Guide to CSS Grid | Codrops CSS Reference
• A Complete Guide to Grid-CSS Tricks

W jQuery możesz skierować bezpośrednio na rodzica.

JEST TO PRZYDATNE, JEŚLI NIE WIESZ DOKŁADNIE, ILE DZIECI BĘDZIE Dodawane dynamicznie lub jeśli po prostu nie możesz ustalić ich liczby.

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);

Pozwoli to parent rosnąć poziomo w miarę dodawania children.

UWAGA: zakłada się, że '.children' mają width i Height zbiór

Jeśli znasz liczbę elementów w "wierszu" i szerokość kontenera, możesz użyć selektora, aby dodać margines do elementów, które musisz wywołać.

Miałem rzędy trzech divów, które chciałem uzasadnić, więc użyłem:

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

Dzięki temu środkowy div w każdym rzędzie ma margines, który wymusza 1. i 3. div na zewnętrznych krawędziach pojemnika

Świetnie nadaje się również do innych rzeczy, takich jak kolory tła granic itp

To zadziałało dla mnie z 5 obrazami w różnych rozmiarach.

1. Tworzenie kontenera div
2. nieuporządkowana lista obrazów
3. w css unordered musi być wyświetlany pionowo i bez punktorów
4. Justify content of container div

Działa to z powodu justify-content: space-between, i znajduje się na liście, wyświetlanej poziomo.

On CSS

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

On 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>