题
我在使用 ColdFusion
填入一个模板,包括 HTML
列出(<ul>
's)。
大多数的这些不长,但有几个有可笑的长度和可能真正立场可以在2至3列。
是有一个 HTML
, ColdFusion
或者也许 JavaScript
(我有jQuery`可用的)方式做到这很容易吗?这是不值得的一些过于复杂的重量级的解决方案,以节省一些滚动。
解决方案
因此,我挖了这条从列表中除了 CSS赃物:多列名单.我最终使用的第一种解决方案,它不是最好的,但其他需要使用复杂HTML,不能产生的动态,或建立大量的定制课程,这可以做到的,但需要加载的在线定型和可能的巨大的网页。
其他解决方案仍然受欢迎。
其他提示
如果园和火狐支持是对你不够好,还有一个CSS解决方案:
ul {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
}
我不知道歌剧。
没有纯粹的CSS/HTML的方式实现这一点,因为我所知道的。你最好的选择就是做到这一预处理(if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1
).
其他选项,使用JavaScript(我不熟悉 jQuery 库,具体地说)将通过循环访问清单,可能基于他们在某一特定类,计的儿童人数,并且如果它是一个高数量足够的、动态创建一个新的列表之后第一,移交某些数量的清单物品的新清单。尽的执行列,你很可能浮他们离开,随后通过一个元件是有风格 clear: left
或 clear: both
.
.column {
float: left;
width: 50%;
}
.clear {
clear: both;
}
<ul class="column">
<li>Item 1</li>
<li>Item 2</li>
<!-- ... -->
<li>Item 49</li>
<li>Item 50</li>
</ul>
<ul class="column">
<li>Item 51</li>
<li>Item 52</li>
<!-- ... -->
<li>Item 99</li>
<li>Item 100</li>
</ul>
<div class="clear">
我已经做这个字--它的跨平台和一个最小的代码。
选择UL,克隆,并插入以前后UL。是这样的:
$("ul#listname").clone().attr("id","listname2").after()
这将插入一份清单以前后一个。如果原始名单采用浮动:离开,他们应该出现。
然后你就可以删除,即使项目从左手表和奇项目从右手的名单。
$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();
现在你有一个左右两列的清单。
要做更多的列只想要使用 .slice(begin,end)
和/或 :nth-child
选择。即,对于21LIs你可以 .slice(8,14)
创建一个新的UL之后插入你的原UL,然后选择的原UL并删除李的选择 ul :gt(8)
.
尝试Bibeault/Katz书jQuery这是一个伟大的资源。
这里是一个变化 Thumbkin的 例中(使用Jquery):
var $cat_list = $('ul#catList'); // UL with all list items.
var $cat_flow = $('div#catFlow'); // Target div.
var $cat_list_clone = $cat_list.clone(); // Clone the list.
$('li:odd', $cat_list).remove(); // Remove odd list items.
$('li:even', $cat_list_clone).remove(); // Remove even list items.
$cat_flow.append($cat_list_clone); // Append the duplicate to the target div.
谢谢Thumbkin!
以下JavaScript code仅在Spidermonkey和犀牛和它运作上的E4X节点--即,这是仅用于服务器的端JavaScript,但它可能会给某人一个起点做jQuery版本。(它一直对我非常有用的服务器上边,但是我没有需要它的客户的严重不足,实际上建立它。)
function columns(x,num) {
num || (num = 2);
x.normalize();
var cols, i, j, col, used, left, len, islist;
used = left = 0;
cols = <div class={'columns cols'+num}></div>;
if((left = x.length())==1)
left = x.children().length();
else
islist = true;
for(i=0; i<num; i++) {
len = Math.ceil(left/(num-i));
col = islist ? new XMLList
: <{x.name()}></{x.name()}>;
if(!islist && x['@class'].toString())
col['@class'] = x['@class'];
for(j=used; j<len+used; j++)
islist ? (col += x[j].copy())
: (col.appendChild(x.child(j).copy()));
used += len;
left -= len;
cols.appendChild(<div class={'column'+(i==(num-1) ? 'collast' : '')}>{col}</div>);
}
return cols;
}
你叫它喜欢 columns(listNode,2)
两列,而且事实证明:
<ul class="foo">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
为:
<div class="columns cols2">
<div class="column">
<ul class="foo">
<li>a</li>
<li>b</li>
</ul>
</div>
<div class="column collast">
<ul class="foo">
<li>c</li>
</ul>
</div>
</div>
这意味着要使用与CSS这样的:
div.columns {
overflow: hidden;
_zoom: 1;
}
div.columns div.column {
float: left;
}
div.cols2 div.column {
width: 47.2%;
padding: 0 5% 0 0;
}
div.cols3 div.column {
width: 29.8%;
padding: 0 5% 0 0;
}
div.cols4 div.column {
width: 21.1%;
padding: 0 5% 0 0;
}
div.cols5 div.column {
width: 15.9%;
padding: 0 5% 0 0;
}
div.columns div.collast {
padding: 0;
}
事情大多数人都忘记的是,在漂浮 <li/>
的项目,所有项目必须是相同的高度,或者列开始越来越不正常。
因为你使用的一个服务器方语言,我的建议是使用CF分割成3组。然后你就可以使用外 ul
包3内 ul
像这样:
<cfset thelist = "1,2,3,4,5,6,7,8,9,10,11,12,13">
<cfset container = []>
<cfset container[1] = []>
<cfset container[2] = []>
<cfset container[3] = []>
<cfloop list="#thelist#" index="i">
<cfif i mod 3 eq 0>
<cfset arrayappend(container[3], i)>
<cfelseif i mod 2 eq 0>
<cfset arrayappend(container[2], i)>
<cfelse>
<cfset arrayappend(container[1], i)>
</cfif>
</cfloop>
<style type="text/css">
ul li { float: left; }
ul li ul li { clear: left; }
</style>
<cfoutput>
<ul>
<cfloop from="1" to="3" index="a">
<li>
<ul>
<cfloop array="#container[a]#" index="i">
<li>#i#</li>
</cfloop>
</ul>
</li>
</cfloop>
</ul>
</cfoutput>
使用模的操作,可以迅速分列入多个列表中插入一个 </ul><ul>
在你的循环。
<cfset numberOfColumns = 3 />
<cfset numberOfEntries = 34 />
<ul style="float:left;">
<cfloop from="1" to="#numberOfEntries#" index="i">
<li>#i#</li>
<cfif NOT i MOD ceiling(numberOfEntries / numberOfColumns)>
</ul>
<ul style="float:left;">
</cfif>
</cfloop>
</ul>
使用 ceiling()
而不是的 round()
确保你没有额外的价值在列表的最后和最后一栏是最短的。
来出列入多个分组的标记可以循环,在这种时尚。
<cfset list="1,2,3,4,5,6,7,8,9,10,11,12,13,14">
<cfset numberOfColumns = "3">
<cfoutput>
<cfloop from="1" to="#numberOfColumns#" index="col">
<ul>
<cfloop from="#col#" to="#listLen(list)#" index="i" step="#numberOfColumns#">
<li>#listGetAt(list,i)#</li>
</cfloop>
</ul>
</cfloop>
</cfoutput>
这里是另一个解决方案,允许对于圆柱列在下面的风格:
1. 4. 7. 10.
2. 5. 8. 11.
3. 6. 9. 12.
(但这是纯粹的javascript,并要求jQuery,没有后备)
以下含有一些代码,修改原型阵列得到一个新的功能的所谓的'大块',打破任何给定列入大块的定大小。接下来是一个功能称为'buildColumns',需要一个UL选择串和一些用于确定有多少排列可能包含的内容。(这里是一个工作JSFiddle)
$(document).ready(function(){
Array.prototype.chunk = function(chunk_size){
var array = this,
new_array = [],
chunk_size = chunk_size,
i,
length;
for(i = 0, length = array.length; i < length; i += chunk_size){
new_array.push(array.slice(i, i + chunk_size));
}
return new_array;
}
function buildColumns(list, row_limit) {
var list_items = $(list).find('li').map(function(){return this;}).get(),
row_limit = row_limit,
columnized_list_items = list_items.chunk(row_limit);
$(columnized_list_items).each(function(i){
if (i != 0){
var item_width = $(this).outerWidth(),
item_height = $(this).outerHeight(),
top_margin = -((item_height * row_limit) + (parseInt($(this).css('margin-top')) * row_limit)),
left_margin = (item_width * i) + (parseInt($(this).css('margin-left')) * (i + 1));
$(this[0]).css('margin-top', top_margin);
$(this).css('margin-left', left_margin);
}
});
}
buildColumns('ul#some_list', 5);
});
弹性盒,可以用来包裹的项目在这两个行和列的方向。
主要的想法是设置 flex-direction
在容器上到 row
或 column
.
NB:如今 浏览器的支持。 是漂亮的好。
小提琴
(标记的样本取自 这个古老的名单分开的文章)
ol {
display: flex;
flex-flow: column wrap; /* flex-direction: column */
height: 100px; /* need to specify height :-( */
}
ol ~ ol {
flex-flow: row wrap; /* flex-direction: row */
max-height: auto; /* override max-height of the column direction */
}
li {
width: 150px;
}
a {
display: inline-block;
padding-right: 35px;
}
<p>items in column direction</p>
<ol>
<li><a href="#">Aloe</a>
</li>
<li><a href="#">Bergamot</a>
</li>
<li><a href="#">Calendula</a>
</li>
<li><a href="#">Damiana</a>
</li>
<li><a href="#">Elderflower</a>
</li>
<li><a href="#">Feverfew</a>
</li>
<li><a href="#">Ginger</a>
</li>
<li><a href="#">Hops</a>
</li>
<li><a href="#">Iris</a>
</li>
<li><a href="#">Juniper</a>
</li>
<li><a href="#">Kava kava</a>
</li>
<li><a href="#">Lavender</a>
</li>
<li><a href="#">Marjoram</a>
</li>
<li><a href="#">Nutmeg</a>
</li>
<li><a href="#">Oregano</a>
</li>
<li><a href="#">Pennyroyal</a>
</li>
</ol>
<hr/>
<p>items in row direction</p>
<ol>
<li><a href="#">Aloe</a>
</li>
<li><a href="#">Bergamot</a>
</li>
<li><a href="#">Calendula</a>
</li>
<li><a href="#">Damiana</a>
</li>
<li><a href="#">Elderflower</a>
</li>
<li><a href="#">Feverfew</a>
</li>
<li><a href="#">Ginger</a>
</li>
<li><a href="#">Hops</a>
</li>
<li><a href="#">Iris</a>
</li>
<li><a href="#">Juniper</a>
</li>
<li><a href="#">Kava kava</a>
</li>
<li><a href="#">Lavender</a>
</li>
<li><a href="#">Marjoram</a>
</li>
<li><a href="#">Nutmeg</a>
</li>
<li><a href="#">Oregano</a>
</li>
<li><a href="#">Pennyroyal</a>
</li>
</ol>
因为我有同样的问题,并找不到任何"清洁"我想发表我的解决方案。在这个例子中,我使用一个颠倒 while
循环,使我可以使用 splice
而不是的 slice
.优势现在是拼接()仅需要指数和范围在哪里片()需要一个指数和总数。后者往往变得困难,同时循环。
缺点是,我需要扭转栈的话,追加。
例如:
cols=4;liCount=35
为循环片=[0,9];[9日,18];[18、27日];[27,35]
反而与接=[27日,8];[18日,9];[9,9日];[0,9]
代码:
// @param (list): a jquery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
var children = list.children(),
target = list.parent(),
liCount = children.length,
newUl = $("<ul />").addClass(list.prop("class")),
newItems,
avg = Math.floor(liCount / cols),
rest = liCount % cols,
take,
stack = [];
while (cols--) {
take = rest > cols ? (avg + 1) : avg;
liCount -= take;
newItems = children.splice(liCount, take);
stack.push(newUl.clone().append(newItems));
}
target.append(stack.reverse());
list.remove();
}
你可以试试这个转换中cols.
CSS:
ul.col {
width:50%;
float:left;
}
div.clr {
clear:both;
}
Html部分:
<ul class="col">
<li>Number 1</li>
<li>Number 2</li>
<li>Number 19</li>
<li>Number 20</li>
</ul>
<ul class="col">
<li>Number 21</li>
<li>Number 22</li>
<li>Number 39</li>
<li>Number 40</li>
</ul>