我想使用基本的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个元素之后继续前进到下一行,这是新的,我无法想象我可以做我需要的结果吗?关于走哪条路线的任何建议?我不需要特别的答案,我知道你们很忙,只是在寻找可以回答我问题的内容。
答案 0 :(得分:0)
尝试使用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>
答案 1 :(得分:0)
如果flexbox基于高度而不是基于每一行的结果数,则可以尝试使用flexbox来实现此目的。
ul {
display: flex;
flex-direction:column;
flex-wrap: wrap;
height: 100px;
}
如果您是基于最大行数来执行此操作,我建议您对循环中的lis进行计数,并且如果结果是row_max的倍数和下一个10个结果中的新ul。
答案 2 :(得分:0)
您也许可以使用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>