Я могу сделать список, используя float:left;, как этот
Но я хотел бы показать это так (как 2 или более столбца)
Как я могу это сделать?
@sandeep дал хорошее решение. К сожалению, не работает в IE (требуется ie7 и выше).
любая помощь?
Я хочу показать элементы списка как два или более столбца (динамическое выравнивание)
Ответ 1
Для этого вы можете использовать свойство column-count:
div#multicolumn1 {
-moz-column-count: 2;
-moz-column-gap: 50%;
-webkit-column-count: 2;
-webkit-column-gap: 50%;
column-count: 3;
column-gap: 50%;
}
Отметьте jsFiddle.
Примечание. Это не работает в IE.
Для IE вы можете использовать этот JavaScript: CSS3 - демонстрация макета нескольких столбцов
Ответ 2
Это работает просто кросс-браузер, не требуется JS. Вы просто ограничиваете ширину столбцов.
<style>
ul.col {width:60px;float:left;margin:0 5px 0 0;padding:0;}
ul.col li {width:50px;background:#999;list-style-type:none;margin:0 0 5px 0;padding:5px;}
</style>
<ul class="col">
<li>1(li)</li>
<li>2(li)</li>
<li>3(li)</li>
<li>4(li)</li>
<li>5(li)</li>
</ul>
<ul class="col">
<li>6(li)</li>
<li>7(li)</li>
<li>8(li)</li>
<li>9(li)</li>
<li>10(li)</li>
</ul>
Если вы застряли с ними в одном UL при загрузке страницы, вы можете разделить их на jQuery, чтобы создать те же результаты:
<script>
$(function(){ //on document ready
var perCol = 5;
var $ul = $('ul.col');
var rows = Math.ceil($ul.find('li').length/perCol);
for(var i=1;i<=rows;i++){
$ul.after('<ul class="col"></ul>');
}
for(var i=1;i<=rows;i++){
$ul.find('li:lt('+(perCol)+')').appendTo('ul.col:eq('+(i)+')');
}
$ul.remove();
});
</script>
Ответ 3
Пока элементы списка имеют фиксированную ширину, как в ваших примерах, не могли бы вы просто сделать что-то вроде этой скрипки? http://jsfiddle.net/swNYE/1/
И везде, где ваш список выплевывается, просто примените "левый" класс к первой половине, а "правый" - ко второй половине. Если вы динамически добавляете контент через Javascript, тогда вы просто запускаете li каждый раз, когда что-то добавляется, и применяете новый правильный класс.
HTML:
<ul>
<li class="left">1</li>
<li class="left">2</li>
<li class="left">3</li>
<li class="left">4</li>
<li class="right">5</li>
<li class="right">6</li>
<li class="right">7</li>
<li class="right">8</li>
</ul>
CSS
li {
width: 100px;
}
li.left {
float: left;
clear: left;
}
li.right {
margin-left: 100px;
}
Ответ 4
Ниже столбца, в качестве аргумента принимает количество столбцов.
Вызов: $(elem).columnize(3)
Протестировано в IE6 из вина в Ubuntu 10.04: работает (выглядит лучше, если вы увеличиваете ширину в таблице стилей, которую я заимствовал из @micha - thanks, btw)
(function($) {
$.fn.decolumnize = function() {
this.children().map(function(index, el) {
var oldPos = null;
var posClass = null;
if($(el).attr("class") && (posClass = $(el).attr("class").match(/orig\-readorder\-[0-9]+/))) {
oldPos = parseInt(posClass[0].replace("orig-readorder-", ""));
$(el).removeClass(posClass[0]);
}
return {
elm: el,
pos: oldPos ? oldPos : index
}
}).sort(function(a,b) {
return a.pos > b.pos ? 1 : -1;
}).map(function(index, ob) {
return ob.elm;
}).appendTo(this);
return this.children().css("float", "left").css("clear", "none");
};
$.fn.columnize = function(numcols) {
var numItems = this.children().length;
var divisor = Math.ceil(numItems / numcols);
var indexOfFinal = null;
this.decolumnize();
var resorted = this.children().map(function(index, el) {
return {
position: (index % divisor) + (index / numItems),
elm: el,
isFinal: index == numItems - 1,
origPos: index
};
}).sort(function(a, b) {
return a.position > b.position ? 1 : -1;
});
return resorted.map(function(index, ob) {
if (indexOfFinal) {
/** TODO: fix redundancy **/
if ((index - indexOfFinal - 1) % (numcols - 1) == 0) {
if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none");
$(ob.elm).css("clear", "left");
}
} else {
/** TODO: fix redundancy **/
if (index % numcols == 0) {
if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none");
$(ob.elm).css("clear", "left");
}
}
if (ob.isFinal) indexOfFinal = index;
$(ob.elm).addClass("orig-readorder-" + ob.origPos);
return ob.elm;
}).appendTo(this);
};
})(jQuery);
Что он делает, это сначала рассчитать порядок сортировки, потому что при простом стиле это не сработает. Чтобы рассчитать порядок сортировки, вам нужно знать количество столбцов спереди. Это можно использовать в качестве делителя, чтобы ввести "clear: left".
Кроме того, используя количество элементов списка и количество столбцов, вы должны оценить количество строк. Это можно использовать в качестве делителя для сортировки элементов на основе остатка между их индексом и количеством строк.
Чтобы гранулировать сортировку, также учитывается исходный индекс...
После размещения последнего оригинального элемента количество столбцов должно быть уменьшено на 1. Вот почему я храню isFinal-boolean. Я уверен, что это можно было бы сделать более элегантно с помощью некоторых умных вычислений.
Затем введите "clear: left в нужном месте и сохраните исходную позицию в классе, чтобы вы могли перейти на более позднюю стадию (например, при вставке или удалении элемента списка динамически)
Best!
Ответ 5
Я нашел способ сделать это и в IE. (с использованием четкого)
HTML:
<div class="left child">1</div>
<div class="child">5</div>
<div class="left child">2</div>
<div class="child">6</div>
<div class="left child">3</div>
<div class="child">7</div>
<div class="left child">4</div>
<div class="child">8</div>
CSS
.child {
height:20px;
width: 20px;
text-align: center;
border: 1px solid #CCC;
background-color: #EEE;
color: #000;
padding: 5px;
float: left;
margin: 5px;
}
.left {
clear: left;
}
Ответ 6
СМОТРИТЕ МОЙ НОВЫЙ ОТВЕТ - МНОГО ЛУЧШЕ, ЧЕМ ЭТО
Если вы имеете дело с элементами фиксированной ширины, то это чистое решение css, которое работает в IE7+. Пример http://jsfiddle.net/VVMnq/33/. Это потребует, чтобы вы знали кое-что о html, с которым работаете (где должен начинаться новый столбец). Здесь длина столбца 2 больше, просто чтобы посмотреть, как он ее обрабатывает: http://jsfiddle.net/VVMnq/42/
HTML
<ul class="TwoColumn">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="column2">6</li>
<li class="column2">7</li>
<li class="column2">8</li>
<li class="column2">9</li>
<li class="column2">10</li>
</ul>
CSS
.TwoColumn {
width: 20px;
padding-left: 22px; /* width plus borders of li */
}
.TwoColumn li {
display: block;
width: 100%;
padding: 0;
margin: 0 -22px 0 -22px; /* width of ul plus borders on li */
float: left;
clear: left;
border: 1px solid blue;
}
.TwoColumn .column2 {
float: none; /* this could be set to float: left and it seemed to work also */
clear: none;
margin: 0 -11px 0 0; /* this should be half of margins for column 1 li */
}
Ответ 7
CSS:
ul.parent li {
float: left;
}
Использование jquery:
$('.parent>li:odd').css("clear", "both");
<ul class="parent">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
Пожалуйста, посмотрите http://api.jquery.com/even-selector/ и http://api.jquery.com/odd-selector/
Ответ 8
NEW ANSWER, который полностью отличается от первого. Это предполагает, что высота всегда высока 5 (что из комментариев к решению jblasco, сделанного anglimas, это требование). Решение здесь чисто css (хотя, если количество элементов неизвестно, тогда для "подсчета" потребуется некоторый javascript и установить класс с именем first, чтобы указать, какой элемент находится в первой строке).
Решение работает в IE7 +, а будет вмещать любое количество столбцов.
См. http://jsfiddle.net/VVMnq/107/.
HTML
<ul class="MultiColumn">
<li class="first">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="first">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
CSS
.MultiColumn {
overflow: auto;
background-color: yellow;
padding:0 10px 10px 0;
float: left;
}
.MultiColumn li {
display: block;
width: 20px;
height: 20px;
padding: 0;
margin: 10px 0px 10px 10px ;
background-color: cyan;
float: left;
}
.MultiColumn li.first {
top: 0px;
}
.MultiColumn li.first + li {
margin: 40px 0 0 -20px;
}
.MultiColumn li.first + li + li {
margin: 70px 0 0 -20px;
}
.MultiColumn li.first + li + li + li {
margin: 100px 0 0 -20px;
}
.MultiColumn li.first + li + li + li + li {
margin: 130px 0 0 -20px;
}
Ответ 9
http://jsfiddle.net/rlemon/Y5ZvA/3/ вы можете попробовать это. Я еще не тестировал его с помощью.
ul {
width:60px; height: 60px;
}
ul li{
float:left;
width:20px;
list-style:none;
}
ul, ul li {
-moz-transform: rotate(-90deg) scaleX(-1);
-o-transform: rotate(-90deg) scaleX(-1);
-webkit-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg) scaleX(-1);
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-3.061616997868383e-16, M12=1, M21=1, M22=3.061616997868383e-16, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=-3.061616997868383e-16,
M12=1,
M21=1,
M22=3.061616997868383e-16,
SizingMethod='auto expand');
}