Güncelleme & Özet

Bu soruya net bir lütuf olduğunu şimdi bağlı yapmak zorunda hissediyorum.

(Ayrıca, eminim ki bu çocuk oyuncağı ne zaman calc() CSS3 birim değer desteklenmiyor, bir şey yapıyor gibi width: calc(25% - 5px); ama muhtemelen tarama internet aklımızı o noktaya)

Tasarım gereksinimleri paylaşan bir kaç proje için bir CSS çerçeve; sıvı 12 sütun düzeni yani üzerinde çalışıyorum. Kullanarak bu oldukça kolay ** 16 yaşında, yüzde genişlikte .column elemanları süzülüyor. Ancak, konu sabit kenar ilavesi ile birlikteboşluk ve herhangi bir biçimde) sütunlar arasında.

İlk denemem açıklandığı gibi sıvı sütunlar, .panel bir çocuk her iç içe kullanılır. HTML parçacığını aşağıdaki HTML (kısalık için azaltılmış):

.column{
    float: left;
    display: inline-block;
}

.width-01{ width:  8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width:      25%; }
/* etc */

.panel{
    width: 100%;
    padding: 5px;
    box-sizing: border-box; /* so padding doesn't increase width */
}

<div class="column width-02">
    <div class="panel">Width-02</div>
</div>
<div class="column width-03">
    <div class="panel">Width-03</div>
</div>
<div class="column width-02">
    <div class="panel">Width-02</div>
</div>
<div class="column width-05">
    <div class="panel">Width-05</div>
</div>

Bu kod, bir düzen, ancak .panel tüm öğeleri her tarafta 5px dolgu var, resme benzer üretecektir.Dış sütunların içeriği kenar görünümü-port kenarı ile aynı hizada yapmaya çalışıyorum (ya da bu konuda üst kapsayıcı). Başka bir yaklaşım .panel sınıf tamamen yok, ve sadece sütun ile gitmek olurdu:

.column{
    float: left;
    display: inline-block;
    padding-left: 10px;
    box-sizing: border-box;
}

.column:first-child{ padding-left: 0px; }

.width-01{ width:  8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width:      25%; }
/* etc */

<div class="column width-02">Width-02</div>
<div class="column width-03">Width-03</div>
<div class="column width-02">Width-02</div>
<div class="column width-05">Width-05</div>

Yine, bu iyi çalışıyor, hatta yakın sonuçlar resmi için aşağıda üreten, ancak şimdi (gerçeksorun doldurma sütun genişliği dağılımı berbat genişliği içine yiyor. :first-child sütun 10 piksel vardır (ya da ne olursa olsun kenar boyutudurdaha fazla içerik alanı kardeşinden daha genişliği.

Bu zararsız, hatta farkedilemez görünebilir; ancak sahip olduğu bir kaç durum vardırkesin(mümkün olduğunca kesinunsurlar arası genişlik dağıtım ya da gerekli, yoksa işler hepten kolaylaştıracaktır.

Ve böylece,dolgu kullanarak olsun, marj, ya da bir kombinasyon bunların; orada sıvı sütunlar için herhangi bir çözüm, sabit kenar boşlukları, iledağıtım bilebu rob" (**** . haha "marjinal olmayacak oluk alanı bitişik ) sütunlarından alan içerik?**

Orijinal Soru

Arama ve benim girişimleri sonuç basit olmaması nedeniyle, bu imkansız olduğuna karar verdim. Eğer herhangi bir cevap olsa getirebilecek, işte burada olduğuna eminim.

Herhangi bir şekilde, saf CSS kullanarak, sabit genişlik, kenar boşlukları ile sıvı genişliği sütunlu bir düzen sağlamak için var mı?

ÖNEMLİ NOTBu şekil bir örnek sadece, ve elde etmek için bakıyorum, belirli bir düzeni yok. Belirli bir çözüm bitişik sütunlar, toplam genişliği dağılımı 12 veya daha az toplam herhangi bir kombinasyonu izin vermelidir. Başvuru için 960 grid popüler düşünün.)

Not: 12 sütun düzeni, görüntü sütun genişliği dağılımı sırasıyla 2, 3, 2, ve 5.

Şimdiye kadar, bir ızgara için müracaat ettik, yüzdeleri kullanarakneredeysebu gerçekleştirir. Sorun, marjları elde etmek için, her bir sütun ilave bir çocuk gerektirir (Onları .panel diyorum):

width: 100%;
box-sizing: border-box;
padding: 10px;

Bu, tekrarneredeyseiyi; sorun, bu yaklaşımın ilk ve son sütun dış olması ile "kenar boşlukları" (10pxve "kenar boşlukları her sütun iki katına arasında" (2 x 10px)

Kesinlikle, CSS3 calc() yeni değer türüne dahil olan, bu çok daha kolay çözülebilir. Bu yönde bir şey:

.width-12 > .panel{ width: 100%; }
.width-09 > .panel{
    width: calc(75% - 10px);
    margin: ...;
}

Javascript bazı düzeltmeler var, bazı şeyleri kesmek çıkardım "çalışıyor", ama ben bir arayış. Umarım grails kutsal şehir var.

Aşağıdaki çözüm, ve bir @avall sağlanan (kesinlikle rağmen basitleştirilmesi üzerinde iyi bir seçim) ne yazık ki benim aradığım şey değil. Asıl sorun, kenar boşlukları dağıtılmış. eşit sütunlar arasında olmak.

Bu çalışma görebildiğim tek yolu 5px " gibi bir şey .panel dolgu azaltır

.column:first-child > .panel {
    padding-left: 0px;
}

.column:last-child > .panel {
    padding-right: 0px;
}

/* not necessary? in any case, haven't tested */
.column:only-child > .panel {
    padding-right: 0px;
    padding-left: 0px;
}

Bu çözüm sadece IE8 :last-child tanımak için başarısız olur, çünkü bu kabul edilebilir değil, (ve bunun için önemli :only-childpseudo seçiciler.

Sonunda anladım. Saat on Ve son on yılda israf edilen yüzlerce yıl önce zaten işe yaramazdı bazı css güveniyorum rağmen) sonra. Herhangi bir frikiklerinden olmadan çözdüm. ve IE8 .

Lütfen 2001 hazırlamak: bu tekne iniş olduğum için Space Odyssey Bir Müzik.

Bu yöntem, deha ve hüner ınline-block elements kullanarak ve sonra da word-aralığı negatif sağ kenar boşluğu kullanarak dengelemek için kullanıyor. Bu marj kendi negatif bir sağ elementler, 0 genişlik ayarlı ve ben hala bir şeyleri sığdırmak için izin arasında çekin olacak, ama bu şartlar üst üste bırakın. Üst negatif marj ayarı tam genişliği ile etkileşim üzerindeki etkisi konusunda çocuk marjı geri alır (magic "100% genişlik" vurmak için çalışıyoruz mark"). Dolgu sadece ve onun gereksiz bir karşı-hareket marjı açısından öğenin boyutunu artırmak için hizmet vermektedir. Bu sık kullanılan box-boyutlandırma jüri hileli çözüm için bu sorun, karşılığında kaybeden kullanmasını doldurma hiç yoksa (ve teminat) ve muhtemelen gerektiren daha kapsayıcı öğeleri.

word-aralığı sağlar sihirli "üçüncü yol" eklemek veya kaldırmak için yatay mesafe arasındaki iki unsur, sağlanır ınline-block, bu yana olacaklar sayılır bir tek "kelime" bu durumda, herhangi bir boşluk arasında olacak collpapse aşağı tek tek kontrol edilebilir "word-aralığı" özelliği. Bu hile dışında bu 0 sonuç almak için başka bir yol, farkında değilim.

Ben de mütevazı bir şekilde-oluklar sabit flex-sütun sorunun nihai cevabı mevcut. Ben burada benim çözüm adı "omega manevra". Bununla birlikte, yeteneğini işlemek keyfi karışık genişlik columns (ekleme 100% toplam genişliği tam olarak ya da biraz daha az için yuvarlama), oluk herhangi bir boyut, herhangi bir önceden tanımlanmış miktarda sütun genişliği, kolları keyfi miktarda satır ile otomatik sarma ve kullanır ınline-bloğu elementleri, bu nedenle sağlar dikey hizalama seçenekleri ile ınline-block, VE değil gerektiren herhangi bir ekstra biçimlendirme gerektirir ve sadece bir tek sınıf beyannamesinde konteyner (saymıyor tanımlama sütun genişlikleri). Kod kendisi için konuşuyor düşünüyorum. İşte 2-6 sütun için kod uygulama yüzdeleri için 10px oluklar ve bonus Yardımcısı sınıfları kullanarak.

EDİT: ilginç bir muamma. Biraz farklı iki sürümü; y mozilla ve ie8 , başka bir şekilde elde etmeyi başardım. Word-aralığı hile y olarak çalışmıyor gibi görünüyor, ve diğer versiyonu y ama ıe8 /mozilla çalışıyor, neden bilmiyorum. İkisini de birleştirerek, her şeyi kapsama alır ve bu taktik birleştirmek için bir yol ya da bir şey, bu soruna geçici bir çözüm bulmak için çok benzer olduğuna dair bahse girmeye hazırım.

EDİT2: daha çok var! Büyülü text-align: justify neredeyse orada Y word-aralığı ile alır. Aralığı biraz kapalı, sağ ve topladığın bir ekstra belki piksel meselesi gibi görünüyor. Ama kullanışlı olduğunu ve daha önce de kullandığım bir şey daha sütunları tutma konusunda daha güvenilir görünüyor. Hiç tarayıcı yatay kaydırma çubuğu gelene kadar sıkıştırmak olacak aşağı daha az sütun için pirzola.

Edit3: mükemmel biraz yakın. 0 yazı tipi boyutu ayarı kapalı aralığı ile diğer sorunları en normalleştirir. Eğer yazı tipi boyutu 0 ise çöker ki sadece 9 şimdi düzeltme.

EDİT4: bazı diğer sıvı genişliği mesajlar: IE cevabı Var -ms-text-justify: distribute-all-lines. IE8-10 test.

/* The Omega Maneuver */
[class*=cols] { text-align: justify; padding-left: 10px; font-size: 0;
             -ms-text-justify: distribute-all-lines; } 

 [class*=cols]>* { display: inline-block; text-align: left; font-size: 13px;
                word-spacing: normal; vertical-align: top;
                -webkit-box-sizing: border-box;
                   -moz-box-sizing: border-box;
                        box-sizing: border-box; }

.cols2 { word-spacing: 20px; padding-right: 20px; }
.cols3 { word-spacing: 30px; padding-right: 30px; }
.cols4 { word-spacing: 40px; padding-right: 40px; }
.cols5 { word-spacing: 50px; padding-right: 50px; }
.cols6 { word-spacing: 60px; padding-right: 60px; }

  .cols2 > * { margin-right: -10px; }
  .cols3 > * { margin-right: -20px; }
  .cols4 > * { margin-right: -30px; }
  .cols5 > * { margin-right: -40px; }
  .cols6 > * { margin-right: -50px; }

Bazı yardımcıları:

.⅛, .⅛s >* { width: 12.50%; }
.⅙, .⅙s >* { width: 16.66%; }
.⅕, .⅕s >* { width: 20.00%; }
.¼, .¼s >* { width: 25.00%; }
.⅓, .⅓s >* { width: 33.00%; }
.⅜, .⅜s >* { width: 37.50%; }
.⅖, .⅖s >* { width: 40.00%; }
.½, .½s >* { width: 50.00%; }
.⅗, .⅗s >* { width: 60.00%; }
.⅝, .⅝s >* { width: 62.50%; }
.⅔, .⅔s >* { width: 66.00%; }
.¾, .¾s >* { width: 75.00%; }
.⅘, .⅘s >* { width: 80.00%; }
.⅚, .⅚s >* { width: 83.33%; }
.⅞, .⅞s >* { width: 87.50%; }
.blarg-five-twelfs { width: 41.66%; }

Zafer Meydanı arasında eylem magnum eserimi burada tanık olabilirsiniz: http://jsfiddle.net/xg7nB/15/

<div class="cols4">
    <div class="⅙">This is my magnum opus</div>
    <div class="¼">I finally beat css</div>
    <div class="⅙">⚉ ☺ ☻ ♾ ☢</div>
    <div class="blarg-five-twelfs">I BEAT IT FOREVER</div>
</div>

Mutlak minimum uygulama, örnek olarak 4 eşit genişlik (25%) genişlik sütunlar ve 10px oluklar kullanarak gibi

.fourEqualCols { word-spacing: 40px; padding: 0 40px 0 10px;
                 text-align: justify; font-size: 0;
                 -ms-text-justify: distribute-all-lines; }

.fourEqualCols>* { margin-right: -30px; width: 25%;
                   display: inline-block; word-spacing: normal;
                   text-align: left; font-size: 13px; }


<div class="fourEqualCols ">
  <div>GLORIOUSLY CLEAN MARKUP</div>
  <div>I hate extra markup and excessive class props</div>
  <div>Naked code</div>
  <div>get intimate</div>
</div>

Bu kod, aslında hemen hemen her mevcut sistem, değil çerçeve değiştirir ortalıkta? Eğer keyfi olarak oluklar ve 100% genişlik isabet sütunları ayarlar yapabilirsiniz, aslında tüm ızgara çerçeveleri/en kesinlikle üstün değil mi? Eğer artık bir çoğumuz gibi IE 7 için geliştirdiğin değilse bu box-boyutlandırma ile birlikte: border-box doldurma ve sınır da olmayan bir sorun oluşturur.

Edit: kabın kenarları ile aynı hizada olmak istediğini doğru. Bu sorun, sadece 10 bazı değerleri değiştirmek ve dolgu kurtulmak ve viola yüzden özellikle yan oluklar eklemek zorunda kaldım. http://jsfiddle.net/bTty3/

[class^=cols] { text-align: justify; font-size: 0;
             -ms-text-justify: distribute-all-lines; } 

 [class^=cols] >* { display: inline-block; text-align: left; font-size: 13px;
                word-spacing: normal; vertical-align: top;
                -webkit-box-sizing: border-box;
                   -moz-box-sizing: border-box;
                        box-sizing: border-box; }

.cols2 { word-spacing: 20px; padding-right: 10px; }
.cols3 { word-spacing: 30px; padding-right: 20px; }
.cols4 { word-spacing: 40px; padding-right: 30px; }
.cols5 { word-spacing: 50px; padding-right: 40px; }
.cols6 { word-spacing: 60px; padding-right: 50px; }
 .cols2 >* { margin-right: 0 }
 .cols2 >* { margin-right: -10px; }
 .cols3 >* { margin-right: -20px; }
 .cols4 >* { margin-right: -30px; }
 .cols5 >* { margin-right: -40px; }
 .cols6 >* { margin-right: -50px; }

Aynı html

<div class="cols4">
    <div class="⅙">This is my magnum opus</div>
    <div class="¼">I finally beat css</div>
    <div class="⅙">⚉ ☺ ☻ ♾ ☢</div>
    <div class="blarg-five-twelfs">I BEAT IT FOREVER</div>
</div>