Nasıl iki sütun sıralanmamış bir listesini görüntülemek için?
Aşağıdaki html ile ne iki sütun olarak görüntülemek için en kolay yöntemdir
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
Görüntülemek istediğiniz:
A B
C D
E
Edit: çözüm IE üzerinde çalışması gereken bir söz Lazım :( Teşekkürler
CEVAP
Modern Tarayıcılar
kaldıraç css3 sütunlar için aradığı destek için bir modül.
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
Eski Tarayıcılar
YANİ destek için ne yazık ki JavaScript ve dom manipülasyon içeren bir kod çözümü gerekir. Bu listenin içeriğini değiştirir her zaman sütunlara listesi sıralama ve tıpkı Basım işlemi gerçekleştirmek için ihtiyacınız olacak demektir. Çözüm aşağıda kısaltma için jQuery kullanır.
HTML:
<div>
<ul class="columns" data-columns="2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
JavaScript:
(function($){
var initialContainer = $('.columns'),
columnItems = $('.columns li'),
columns = null,
column = 1; // account for initial column
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (idx !== 0 && idx > (columnItems.length / columns.length) (column * idx)){
column = 1;
}
$(columns.get(column)).append(el);
});
}
function setupColumns(){
columnItems.detach();
while (column < initialContainer.data('columns')){
initialContainer.clone().insertBefore(initialContainer);
column ;
}
columns = $('.columns');
}
$(function(){
setupColumns();
updateColumns();
});
})(jQuery);
CSS:
.columns{
float: left;
position: relative;
margin-right: 20px;
}
DÜZENLEME:
Bu aşağıdaki gibi sütunlar sırası aşağıda dikkat çekti
A E
B F
C G
D
OP aşağıdaki eşleştirme: bir değişken için süre istedi
A B
C D
E F
G
Varyant gerçekleştirmek için sadece aşağıdaki kodu değiştirin:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column > columns.length){
column = 0;
}
$(columns.get(column)).append(el);
column = 1;
});
}
Nasıl sqlite3 / sütun adları listesini...
Nasıl fotoğraf listesini görüntülemek ...
Nasıl bir SQLite veritabanı için bir t...
Nasıl bir içeriği görüntülemek için La...
Nasıl Server tablo sütun olup olmadığı...