使用CSS的流体多列垂直排序列表

分享于 

7分钟阅读

Web开发

  繁體

介绍

本文介绍了一种新的解决动态。多列。垂直顺序列表的解决方案,同时保留项目的顺序。

Background

使用HTML创建一个单列垂直列表是很简单的,只需要使用 ULLI 标签或者 BR 标签。 这样可以使用少量服务器端编码将该列表扩展到固定数量的列,然后将列表插入到多个列中,或者将它的插入一个多列表或者一系列 div 表。 然而,我们最近需要创建一个流式的多列垂直列表,使用它们可以有效地使用可以用空间。 搜索web为解答生成的建议,我们要使用JavaScript或者等待更广泛的对xquery列特性的支持 ! 我们也不想这样做,所以我们发现了我们认为这是一种新的方法。

使用代码

使用水平顺序列表的解决方案的一个解决方案是使用固定宽度浮点。

<divstyle="float:left;width:120px;">Archery<br/>Ballooning<br/>Biking</div><divstyle="float:left;width:120px;">Bungee Jumping<br/>Coasteering<br/>Dancing</div><divstyle="float:left;width:120px;">Driving<br/>Gliding<br/>Motor Racing</div><divstyle="float:left;width:120px;">Murder Mystery<br/>Off-Roading<br/>Paintballing</div>

如果宽度( 由虚线 rectangle 指示) 足够大,则这里代码将呈现如下:

。fluidverticallist/图。png

然而,随着可用宽度的减少,在使用水平排序的情况下,即使水平排序可能被保存,也不会保留垂直排序,直到达到完整的换行。

。fluidverticallist/图。png

。fluidverticallist/figure3。png

。fluidverticallist/figure4.png

这里外,如果某些浮动的div s 是不同的高度,即使是水平排序也可以分解为'智能化'。

。fluidverticallist/figure5.png

问题是我们无法控制浮点数的包装顺序。 如果我们可以知道第二个浮点在第一个。第二个和第三个包下包装之前,我们会很好。 然而,它总是最后一个被包装起来的浮动。

我们对这个问题的解决方案是使用嵌套的浮点和设置浮点的widthmin-width 属性。

我们的Prototype float现在看起来像这样:

<divstyle="float:left;width:50%;min-width:110px;"> CONTENT </div>

这些都嵌套在一起,这样每一对相邻的列表项或者项块都包含在一个浮动div中。

<divstyle="float:left;width:50%;min-width:110px;"><divstyle="float:left;width:50%;min-width:110px;">Archery
 <br/>Ballooning<br/>Biking</div><divstyle="float:left;width:50%;min-width:110px;">Bungee Jumping
 <br/>Coasteering<br/>Dancing</div></div><divstyle="float:left;width:50%;min-width:110px;"><divstyle="float:left;width:50%;min-width:110px;">Driving
 <br/>Gliding<br/>Motor Racing</div><divstyle="float:left;width:50%;min-width:110px;">Murder Mystery
 <br/>Off-Roading<br/>Paintballing</div></div>

这给我们一个DOM结构为 below:

。fluidverticallist/figure6.png

当可用宽度减小时,百分比宽度会导致每列缩小,直到列按 min-width 属性设置的下限宽度。 第一个击中的div 是内部 div ( 用红色),所以当我们通过临界值,外部 div的( 蓝色) 就足够窄,不能容纳内部 div,所以我们可以看到如下:

。fluidverticallist/figure7.png

。fluidverticallist/figure8.png

如你所见垂直排列是保留的。

如果 power width power nesting nesting nesting nesting nesting nesting nesting nesting nesting nesting nesting nesting nesting nesting nesting nesting nesting nesting columns columns columns columns columns columns columns columns columns columns columns。

这里方法在 8列的操作中的一个示例是可用的,这里是。

服务器端要求

本文的重点是演示 上面'技巧'来构建能够适应可用空间的多列垂直列表。 为了说明服务器端需求,我们在 VB.Net 中包含一个示例方法,该方法为 8列所需的呈现。

PublicFunction HTMLMultiColumnList(ByVal listitems As List(OfString), _
 ByVal widthpixels AsInteger) AsStringDim output AsNew StringBuilder
 '' Calculate the number of items required in each block, and the number of blocks ' that will have an extra item to cope with the remainder.'Dim itemsperblock AsInteger = CInt(Math.Floor((listitems.Count)/8))
 Dim blockswithextraitems AsInteger = listitems.Count - (itemsperblock * 8)
 '' Build the sublists'Dim sublists(8) As List(OfString)
 Dim counter AsInteger = 0For i AsInteger = 0To8 - 1 sublists(i) = New List(OfString)
 Dim itemsthisblock AsInteger = itemsperblock
 If i <blockswithextraitems Then itemsthisblock += 1For k AsInteger = 0To itemsthisblock - 1If counter <listitems.Count Then sublists(i).Add(listitems(counter))
 counter += 1EndIfNextNext'' Render the sublists with nested float divs'Dim divopen AsString = String.Format( _
 "<div style=""float:left;width:50%;min-width:{0}px;"">", 
 widthpixels.ToString)
 Dim divclose AsString = "</div>"For i AsInteger = 0To7If i Mod4 = 0Then output.Append(divopen)
 If i Mod2 = 0Then output.Append(divopen)
 output.Append(divopen)
 output.Append(Join(sublists(i).ToArray, "<br/>"))
 output.Append(divclose)
 If i Mod2 = 1Then output.Append(divclose)
 If i Mod4 = 3Then output.Append(divclose)
 NextReturn output.ToStringEndFunction

Points of interest

这个方法的一个问题是使用模 2,换句话说,8列列表,然后将列包装到 4列,然后是一列,然后返回一个列。 但是,在每个阶段,包含列表项的底层 div 所使用的宽度总是等于或者 GREATER的可以用宽度的50%。 虽然有一个解决方案可以将 8列包装成 7列,从视觉角度看,这种方法很好地工作。

注:请注意,插图 上面 中的边距和彩色边框不应该使用。 包装 div 必须没有边框或者边距,或者 50%宽度值将不再正确。 如果想要'装饰'的块,然后在最内层浮动的div 中使用进一步的标记。


COL  lis  列表  column  ord  Vertica  
相关文章