Question

我有一个自动生成的列表（项目数量及其宽度事先未知）：

<div>Page header</div>
<div>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    ...
    <li>Ninety nine</li>
    <li>One hundred</li>
  </ul>
</div>
<div>Page footer</div>

我想要以下布局：

+-----------------------------------------+
| Page header                             |
|                                         |
| +-------------------------------------+ |
| |One    Five   Nine    Thirteen  .... | |
| |Two    Six    Ten     Fourteen  .... | |
| |Three  Seven  Eleven  Fifteen   Ninet| |
| |Four   Eight  Twelve  Sixteen   One h| |
| <[=======scrollbar=========]----------> |
|                                         |
| Page footer                             |
+-----------------------------------------+ <-- window (viewport) frame

这样

列表填充窗口宽度和窗口高度（页眉和页脚高度除外），并在窗口调整大小时自动调整大小，
列表水平滚动，带有水平滚动条
自动选择行数和列数
列的宽度由列表中最宽的元素自动选择，或者甚至可以自动为每列作为此列的最宽元素。

我知道如何针对固定数量的列进行类似的设计，但不是针对自动调整到屏幕区域的多个列。

如果解决方案不是微不足道的，那么可能有准备好的.css或.js吗？

Answer 1

我认为这就是你要找的一切。它主要使用JQuery来实现效果（其中一些在CSS中）。它也是动态的，因此它应该处理你拥有的任何数量的li。我对其工作原理的解释见下面的代码：

//find the number of li's
var numberOfResults = $('li').length;

//set how many li's you want per row
var numberPerRow = 4;

//pull the first ul for later use
var $firstUL = $('ul');

//divide the number of li's from the number you want per row then round the number
var numberOfRows = Math.ceil(numberOfResults/numberPerRow);

//find the width of the largest li for later use
var maxWidth = Math.max.apply( null, $( 'li' ).map( function () {
  return $( this ).outerWidth( true );
}).get() );

//set container width the width of all rows * the width of each one
$(".container").css({"width": (maxWidth*numberOfRows)+"px"})

//add a ul depending on the number of rows
for(var i=1;i<=numberOfRows;i++){
   $(".container").append('<ul></ul>');
}

// go through each row and add the lis
for(var i=1;i<=numberOfRows;i++){
   $firstUL.find('li:lt('+(numberPerRow)+')').appendTo('ul:eq('+(i)+')');      
}

//loop through all of the lis and set the width to the max
$("li").each(function(){
   $(this).css({"width":maxWidth+"px"})
});

FIDDLE

Answer 2

您要求列表填充窗口宽度，但您说它应该使用水平滚动条水平滚动。这些是相互排斥的。它适合窗口宽度应该没有水平滚动条。无论如何，水平滚动条的设计很糟糕，虽然垂直可以。

您可以做的是填充HTML表格，然后循环检查宽度的行和单元格以查看您拥有的内容。之后，您可以使用每行或每列宽度不同的单元格数重新填充表格。也许你可以这样做两到三次，但这对我来说似乎很狡猾。没有自动功能来执行此操作。我建议使用最合适的单元格宽度作为常量，通过反复试验得出，并在发生溢出内容时使用CSS属性丢弃。

Answer 3

要让列表自动展开以适应窗口的宽度，您可以使用以下CSS，了解您可能需要展开其他父元素并设置margin: 0和padding: 0 < / p>

width: 100%;

要使列表在屏幕太大时滚动，请尝试使用以下CSS样式

overflow-x: scroll

或者如果您需要列表在太大时向两个方向滚动，请使用此

overflow: scroll

具有多个列的CSS列表，具有水平滚动和自动列宽和高度

3 个答案: