IE Column-Count & Column-Gap için alternatif

Question

column-count ve column-gap kullanmanın IE alternatifi olup olmadığını merak ediyorum?

Her beşinci öğe için otomatik olarak yeni bir sütun oluşturan bir liste oluşturma hakkında bu post yaptık. Leniel, column-count ve column-gap'u kullanan bir çözüm önerdi ancak bu IE tarafından desteklenmiyor. Geri dönüş çözümü arıyorum.

Answer 1

Bunu buldum: Multi-column Layout with CSS3. CSS3 Çoklu Kolon Tarayıcısı Desteği başlıklı bölümü okuyun.

Eğer çok sütunlu desteği olmayan tarayıcılar desteklemek gerekirse, o zaman bu tarayıcılar için bir geri dönüş seçeneği olmalıdır: Bu aşağıdaki belirtiyor. Burada başka bir stil sayfaları sonra kafanın içinde ... Modernizr komut dosyası ile

1. Yeri aşağıdaki SCRIPT etiketi bunu nasıl geçerli:

   <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script> 
   

2. aşağıda başka SCRIPT'i ekle Yukarıdaki satır okur:

3. CSS stil sayfası oluşturma tha t çok sütunlu CSS'nizi içerir ve aynı dizinde columns.css olarak kaydeder.

4. Geri dönüş CSS'nizi (şamandıralı sütunlar gibi) içeren bir CSS stili sayfası oluşturun ve aynı dizinde no-columns.css olarak kaydedin. Sayfanızı IE ve Chrome, Safari veya Opera'da test edin.

---

sayfa Multiple Columns Bu şekilde gidiş ilgileniyorsanız bir JavaScript özelliklerden kaçınarak sağlar.

Answer 2

İşte benim için ne işe yarıyor: JS'yi veya yalnızca IE'ye bağlı bir koşulu kullanmak yerine, Modernizr'in sınıflarını doğrudan stil sayfanızda kullanabilirsiniz. Kullanıcının tarayıcısı css sütunları desteklemiyorsa

göreceksiniz: Bir bizim web sayfasında Öğeyi İncele yoksa

, html etiketine eklenen birçok CSS sınıfları olduğunu göreceksiniz Öğeleri yüzdürmek için kullanabileceğiniz "no-csscolumns" sınıfı.

Answer 3

Burada, sütun sayısı özelliğiyle oluşturulanla aynı görünen çoklu oluklu menü oluşturma ve TÜM BROWSERS TÜM BROWSERS'da çalışma çözümdür.

Bu

yüzer elemanları ile yapılır, ama burada hile yeniden sipariş javascript (veya sunucu tarafında) elementler yüzden doğal akış yukarı-aşağı yerine sol-sağ olarak

görünüyor etmektir edilir Öğe1 Item4 Item7

Item2 Item5 Item8

Item3 Item6

Örnek: IE ve IE Edge için keşfedilen http://jsfiddle.net/xrd5Y/16/

// number of columns 
var columns = 4; 

var $ul = $('ul.multicolumn'), 
    $elements = $ul.children('li'), 
    breakPoint = Math.ceil($elements.length/columns); 
    $ordered = $('<div></div>'); 

function appendToUL(i) { 
    if ($ul.children().eq(i).length > 0) { 
     $ordered.append($ul.children().eq(i).clone()); 
    } 
    else $ordered.append($('<li></li>')); 
} 

function reorder($el) { 
    $el.each(function(){ 
     $item = $(this); 

     if ($item.index() >= breakPoint) return false; 

     appendToUL($item.index()); 
     for (var i = 1; i < columns; i++) { 
      appendToUL(breakPoint*i+$item.index()); 
     } 
    }); 

    $ul.html($ordered.children().css('width',100/columns+'%')); 
} 

reorder($elements); 

Answer 4

İşte basit bir çözüm sadece kolon-2 <p> your text </p>, benim için çalıştı, Paragraf <p> your text </p> tarafından her bir sütunu ayırın. Ben internet explorer algılamak için javascript kullanmamayı tercih

#subfootera { 
    with:100%; 
    text-align:left; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 14px; 
    font-weight: bold; 
    color: #000; 
    text-shadow:1px 1px 1px #999; 

} 

.subfooterb { 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
    -moz-column-count: 2; /* Firefox */ 
    column-count: 2; 
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */ 
    -moz-column-gap: 10px; /* Firefox */ 
    column-gap: 10px; 
} 

    <div id="subfootera"> 
    <div class="subfooterb"> 
    <p>Your Text.</p> 
    <p>Your text or an img</p> 
    </div> 
    </div>