Eşit aralıklı DIV'lerle akışkan genişliği

Akışkan genişliğinde bir kabım var DIV.

Bunun içinde 4 adet DIV var tüm 300px x 250px ...

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

Olmak istediğim kutu 1 sola yüzülecek, kutu 4 sağa yüzecek ve kutu 2 ve 3 aralarında eşit aralıklı olacak. Boşluğun da akışkan olmasını istiyorum, böylece tarayıcı küçüldükçe alan da küçülüyor.

Bkz. Http://jsfiddle.net/thirtydot/EDp8R/

• Bu IE6 + ve tüm modern tarayıcılarda çalışır!
• Çalışmayı kolaylaştırmak için istediğiniz boyutları yarıya indirdim.
• text-align: justifyile kombine .stretchkonumlandırmayı başa çıkıyor şeydir.
• display:inline-block; *display:inline; zoom:1inline-blockIE6 / 7 için düzeltmeler , buraya bakın .
• font-size: 0; line-height: 0 IE6'daki küçük bir sorunu giderir.

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

Extra span( .stretch) ile değiştirilebilir :after.

Bu , yukarıdaki çözümle aynı tarayıcılarda hala çalışır . :afterIE6 / 7'de çalışmıyor, ancak distribute-all-linesyine de kullanıyorlar , bu yüzden önemli değil.

Bkz. Http://jsfiddle.net/thirtydot/EDp8R/3/

Küçük bir dezavantajı var :after: Safari'de son sıranın mükemmel çalışması için HTML'deki boşluklara dikkat etmelisiniz.

Özellikle, bu çalışmaz:

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

Ve bu şunları yapar:

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

Bunu, her birine divbir boxNsınıf eklemeden rastgele sayıda çocuk için değiştirebilirsiniz.

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

için

#container > div { ...

Bu, div'ın ilk çocuğu olan herhangi bir div'i seçer #containerve bunun altında başka hiçbiri yoktur. Arka plan renklerini genelleştirmek için, yalnızca IE9 + ve diğer modern tarayıcılarda desteklenmesine rağmen CSS3 nci sıra seçiciyi kullanabilirsiniz :

.box1, .box3 { ...

dönüşür:

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

Bir jsfiddle örneği için buraya bakın .

Bunu şimdi yapmanın en kolay yolu bir flexbox'tır:

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

O zaman CSS basitçe:

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

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

Bununla birlikte , bu şu anda yalnızca nispeten yeni tarayıcılar tarafından desteklenmektedir ( http://caniuse.com/flexbox ). Ayrıca, flexbox düzeni spesifikasyonu birkaç kez değişti, bu nedenle eski bir sözdizimi ekleyerek daha fazla tarayıcıyı kapsayabilir:

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

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

Eğer css3 bir seçenektir, bu css kullanılarak yapılabilir calc()işlevi.

Durum 1: Tek bir satırdaki kutuları yaslama ( FIDDLE )

İşaretleme basittir - bazı kap öğesi içeren bir grup div.

CSS şöyle görünür:

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

nerede -1px bir IE9 + kalk / yuvarlama hatanın düzeltilmesi - bakınız burada

Durum 2: Birden çok satırdaki kutuları yaslama ( FIDDLE )

Burada, calc()işleve ek media queriesolarak gereklidir.

Temel fikir, her #columns durumu için bir medya sorgusu oluşturmaktır, burada daha sonra elemanların her birinde (son sütundaki olanlar hariç) marj-sağını çalışmak için calc () kullanırım.

Bu çok fazla iş gibi geliyor, ancak LESS veya SASS kullanıyorsanız, bu oldukça kolay bir şekilde yapılabilir

(Yine de normal css ile yapılabilir, ancak daha sonra tüm hesaplamaları manuel olarak yapmanız gerekir ve daha sonra kutu genişliğinizi değiştirirseniz - her şeyi tekrar çalışmanız gerekir)

Aşağıda LESS kullanan bir örnek var: (Bu kodu onunla oynamak için buraya kopyalayabilir / yapıştırabilirsiniz , [ayrıca yukarıda belirtilen kemanı oluşturmak için kullandığım kod])

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

Temel olarak, önce bir kutu genişliği ve kutular arasında istediğiniz minimum bir kenar boşluğuna karar vermeniz gerekir.

Bununla, her eyalet için ne kadar alana ihtiyacınız olduğunu öğrenebilirsiniz.

Ardından, sağ kenar boşluğunu hesaplamak için calc () öğesini ve son sütundaki kutulardan sağ kenar boşluğunu kaldırmak için nth-child öğesini kullanın.

Avantajı kullanan kabul cevap üzerinden bu cevabın text-align:justifynihai satırda kalan 2 kutu varsa - I: alamadım son satırda kutuları mesela 'haklı' - Eğer kutularının birden fazla satır varken olmasıdır ilk kutunun solda ve bir sonraki kutunun sağda olmasını istemiyorum - aksine kutular birbirini sırayla takip ediyor.

İlgili tarayıcı desteği : Bu IE9 +, Firefox, Chrome, Safari6.0 üzerinde çalışacak + - (bkz burada daha fazla ayrıntı için) i IE9 üzerinde + medyanın sorgu devletler arasında bir aksaklık biraz var olduğunu fark Ancak. [birisi bunu nasıl düzeltebileceğini bilirse gerçekten bilmek istiyorum :)] <- BURADA SABİT

Diğer gönderiler flexbox'tan bahsetti , ancak birden fazla öğe satırı gerekiyorsa flexbox'ın space-betweenözelliği başarısız oluyor (gönderinin sonuna bakın)

Bugüne kadar, bunun için tek temiz çözüm

CSS Izgara Yerleşim Modülü ( Codepen demosu )

Temel olarak gerekli olan ilgili kod şuna bağlanır:

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) Konteyner elemanını bir ızgara kabı yapın

2) Izgarayı gerektiği şekilde 'otomatik' sütunlarla ayarlayın. Bu, duyarlı düzenler için yapılır. Her bir sütunun genişliği 120 piksel olacaktır. ( 1 auto-fitsatırlık auto-fillbir düzen için) boş parçaları 0'a daraltan (gösterildiği gibi) öğelerin kalan alanı kaplaması için genişlemesine izin verdiğini (not edildiği gibi ) not edin. (Neden bahsettiğimi görmek için bu demoya bakın )).

3) Izgara satırları ve sütunları için boşluklar / oluklar ayarlayın - burada, bir 'arasında boşluk' düzeni istediği için, boşluk aslında minimum bir boşluk olacaktır, çünkü gerektiğinde büyüyecektir.

4) ve 5) - Flexbox'a benzer.

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 demosu (Efekti görmek için yeniden boyutlandır)

Tarayıcı Desteği - Caniuse

Şu anda Chrome (Blink), Firefox, Safari ve Edge tarafından destekleniyor! ... IE'den kısmi destek alarak ( Bu yazıyı Rachel Andrew tarafından görebilirsiniz)

NB:

Flexbox'ın space-betweenözelliği bir satır öğe için harika çalışır, ancak öğelerini saran bir esnek kaba uygulandığında - (ile flex-wrap: wrap) - başarısız olur, çünkü son satır öğesinin hizalanması üzerinde hiçbir kontrolünüz yoktur; son satır her zaman haklı çıkar (genellikle ne istediğinizi değil)

Göstermek:

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 (Neden bahsettiğimi görmek için yeniden boyutlandır)

CSS ızgaraları hakkında daha fazla bilgi:

• MDN
• Jen Simmons - CSS kılavuzunu öğrenin
• CSS Izgara için Komple Kılavuz | Codrops CSS Başvurusu
• Şebekeye Komple Kılavuz - CSS Hileleri

Bu benim için farklı boyutlarda 5 resim ile çalıştı.

1. Bir kapsayıcı div oluşturma
2. Resimler için Sırasız liste
3. Css'de, yüksüz olanların dikey olarak ve madde işaretleri olmadan gösterilmesi gerekir
4. Kapsayıcı div içeriğini gerekçelendirme

Bu, iki yana yaslama içeriği nedeniyle çalışır: arasındaki boşluk ve bu, yatay olarak görüntülenen bir listede.

CSS'de

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

Html'de

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

içinde jQueryEbeveyn'i doğrudan hedefleyebilirsiniz.

BU KADAR ÇOCUKLARIN DİNAMİK OLARAK NASIL EKLENECEĞİNİ BİLMİYORSANIZ VEYA SADECE NUMARASINI ÇÖZEMİYORSANIZ FAYDALIDIR.

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

Bu , beng eklendikçe parentyatay olarak büyümesini sağlar children.

NOT: Bu '.children', a widthve HeightSet öğelerinin

Umarım yardımcı olur.

"Satır" başına öğe sayısını ve kabın genişliğini biliyorsanız, haklı bir görünüme neden olmak için ihtiyacınız olan öğelere kenar boşluğu eklemek için bir seçici kullanabilirsiniz.

Ben haklı istedim üç div satır satır vardı yani kullanılan:

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

bu, her sıradaki orta bölmenin 1. ve 3. bölmeyi kabın dış kenarlarına zorlayan bir kenar boşluğuna sahip olmasını sağlar

Sınırlar arka plan renkleri vb.Gibi diğer şeyler için de harika