Question

我需要循环播放一个下拉菜单的链接数组。

下拉菜单为固定高度div 。我需要链接从左上角向下填充div，然后当列处于最大高度（由周围div设置）时，它将从顶部向下开始一个新列，如下所示。

link one    link four   link seven  
link two    link five   link eight
link three  link six    link nine

我正在尝试使用<ul> <li></li> </ul>，但我无法理解我将如何设计它？如果我向左浮动它会向左对齐，如果我不这样它将不会向左浮动以开始一个新列？

它是一个LIQUID文件，所以我受到限制。（liquid是Shopify模板文件类型）

Answer 1

您可以使用CSS3列完成此操作：http://www.quirksmode.org/css/multicolumn.html

否则你需要将你的行包装在一个包含元素中，该元素是div的高度并浮动它们。

我能看到的另一种方法是使用一些JavaScript，但如果你不使用CSS3列，你可能仍需要插入某种额外的标记来实现这一点。

Answer 2

~~我担心HTML / CSS中的这种流程是不可能的。事物从左到右，然后从上到下流动。不是相反。~~对。 CSS3专栏。不知道那些。：P Thanks, Chris!

无论如何，虽然CSS3列仍然没有得到广泛支持，但最简单的解决方法是为每个项目提供一个固定的高度，然后您可以计算服务器端代码中的每一列。只需用它们发出标准<table>即可完成。

否则，您可以使用Javascript来衡量每个项目并在客户端执行布局。

Answer 3

如果您想要使用CSS3，请尝试查看此A List Apart article on multi-column lists，它有多种方法可以将列表分成多列。我不会发布一个特定的解决方案，因为它取决于你的情况，但我已经尝试了方法6并且它有效。

Answer 4

我认为这并不像你正在寻找的那样是一般的答案，但是假设某些常数（总是9个项目;总是3个项目的3列）这里是一个使用相对定位来实现所需的例子效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    <head>
        <title>Unordered list help/title>
        <style type="text/css">
            #myList {
                width:301px;
                height:61px;
            }
            #myList li + li + li + li {
                width:100px;
                float:right;
                clear:right;
                position:relative;
                top:-60px;
                left:-100px;
            }
            #myList li + li + li + li + li + li + li {
                position:relative;
                left:0px;
                top:-120px;
            }
            #myList li:first-child,
            #myList li:first-child + li,
            #myList li:first-child + li + li {
                width:100px;
            }
        </style>
    </head>
    <body>
        <ul id="myList">
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
            <li>Seven</li>
            <li>Eight</li>
            <li>Nine</li>
        </ul>
    </body>
</html>

无序列表帮助

4 个答案: