Question

我想使用基本的li标签创建与此类似的内容。因此，想要创建一个垂直显示的列表，并在第一行填充时弹出到下一行。

$row_max = 10;
echo '<ul>';
foreach($items as $item) {
    echo "<li class='vertical'>$item</li>";
}
echo '</ul>';

使用我的CSS：

.vertical {
    float: left;
}

显然，这并没有满足我的要求，我不知道如何使用我的$row_max告诉它在第一个10个元素之后继续前进到下一行，这是新的，我无法想象我可以做我需要的结果吗？关于走哪条路线的任何建议？我不需要特别的答案，我知道你们很忙，只是在寻找可以回答我问题的内容。

Answer 1

尝试使用flexbox。

ul{
  display:flex;
  flex-direction: column;
  max-height: 6em;
  flex-wrap: wrap;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

Answer 2

如果flexbox基于高度而不是基于每一行的结果数，则可以尝试使用flexbox来实现此目的。

ul {
   display: flex;
   flex-direction:column;
   flex-wrap: wrap;
   height: 100px;
}

如果您是基于最大行数来执行此操作，我建议您对循环中的lis进行计数，并且如果结果是row_max的倍数和下一个10个结果中的新ul。

Answer 3

您也许可以使用css columns规则集〜它不取决于高度，因此，如果有20或200个li项目，它将相应地增长到min-height

    <style>
            ul{
                width:60%;
                min-height:200px;
                float:none;
                margin:auto;
                list-style:none;
                column-count: 4;
                column-width:25%;
                column-gap:1rem;
                column-rule: 1px solid gray;
                box-sizing:border-box;
            }
        </style>

提出一个想法...

<?php
    echo "<ul>";
    for( $i=0; $i < 141; $i++ )echo "<li>List item $i</li>";/* any number...*/
    echo "</ul>";
?>

为了更类似于问题中描述的图像，列表项的布局具有一定程度的随机性。实际的布局将由记录集和php中的一些逻辑来控制，但下面仅是模拟它的外观。

<style>
        ul{
            font-family:calibri,verdana,arial;
            width:60%;
            min-height:200px;
            float:none;
            margin:auto;
            list-style:none;
            column-count: 4;
            column-width:25%;
            column-gap:1rem;
            column-rule: 1px solid gray;
            box-sizing:border-box;
        }
        h4{
            border-top:1px dotted gray;
            margin:0.5rem 0 1rem 0;
            padding:0.25rem 0 0 0;
            color:gray;
        }
    </style>

<?php

    $j=0;

    echo "<ul>";
    for( $i=0; $i < 100; $i++ ){


        echo "<li>List item $i</li>";

        if( $i > 0 && ( $i % rand(3,19) == 0 or $i % rand(12,23) == 0 ) ){
            $j++;
            echo "<h4>Category $j</h4>";
        }
    }
    echo "</ul>";

?>

在javascript方面做了一些尝试-也许取得了一些进展，但还没有完全解决问题，但是也许以下内容可能会提供一些指导（也许不是）

一些基本的CSS

<style>
    ul{
        font-family:calibri,verdana,arial;
        width:60%;
        min-height:50vh;
        max-height:100vh;
        height:auto;
        float:none;
        margin:auto;
        list-style:none;
        column-count: 4;
        column-width:25%;
        column-gap:1rem;
        column-rule: 1px solid gray;
        box-sizing:border-box;
    }

    .breaker{
        font-weight:bold;
        font-size:1.25rem;
        text-decoration:underline;
        border-top:1px dotted gray;
        padding:0.25rem 0 0 0;
        color:gray;
    }

    .breaker:first-of-type{
        border-top:1px solid transparent;
    }
    .breaker:last-of-type{
        border-bottom:2px solid dashed;
    }
</style>

一些PHP可以模拟您的菜单系统

<?php
    $j=0;
    $limit=rand(10,150);

    $html=array();
    $html[]="<ul id='menu'>";
    for( $i=0; $i < $limit; $i++ ){
        if( $i >= 0 && ( $i % rand(3,19) == 0 or $i % rand(12,23) == 0 ) ){
            $j++;
            $html[]="<li data-cat=$j class='breaker'>Category $j</li>";
        }
        $html[]="<li data-cat=$j>List item $i</li>";
    }
    $html[]="</ul>";
    echo implode( PHP_EOL, $html );
?>

我尝试使用getBoundingClientRect()方法来确定元素的左位置是否已从前一个元素改变。它或多或少地检测到应该在何处发生中断（或一个版本发生了中断），但这似乎是产生中断的最后一步。据说在使用列布局时有一些css技巧可以强制破坏，但是支持似乎很粗略，我尝试过的任何方法都没有获得成功。....

<script>
    let cat,left=false;
    let tmp={};

    let i=j=0;
    let n=p=false;

    Array.prototype.slice.call( document.querySelectorAll( 'ul#menu li.breaker' ) ).forEach( function( li, index ){
        if( index > 0 ){
            cat=parseInt( li.dataset.cat );
            left=parseInt( li.getBoundingClientRect().left );

            i=0;
            j=0;
            n = li.nextSibling;
            p = n.previousSibling;

            while( n && n.nodeType==1 && !n.classList.contains( 'breaker' ) ){
                if( parseInt( n.getBoundingClientRect().left ) > left ) i++;
                n = n.nextSibling;
                j++;
            };

            if( n && n.nodeType==1 && i > 0 && j > 0 ) tmp[cat]=j+1;
            return;
        }
    });


    const insertbreaks=function(i){
        let oFrag=document.createDocumentFragment();
        for( var a=0; a < i; a++ )oFrag.appendChild( document.createElement('br') );
        return oFrag;
    };


    let keys=Object.keys( tmp );
    let vals=Object.values( tmp );

    for( i=keys.length-1; i >= 0; i-- ){
        let parent=document.querySelector('li[ data-cat=\"'+keys[ i ]+'\" ]');
        parent.parentNode.insertBefore( insertbreaks( vals[ i ] ), parent );
    }
</script>

使用li标签

3 个答案: