Question

我想使用CSS为我的列表创建两个列布局。

假设我有5个项目，演示文稿将是：

<item 1>  <item 4>
<item 2>  <item 5>
<item 3>

如何使用HTML和CSS执行此操作？请记住，列表长度是可变的。

我将使用C＃生成HTML服务器端，这将提供更大的灵活性。

Answer 1

尝试AListApart中的这篇文章，几乎涵盖所有基础

Answer 2

我终于下定决心并使用两个浮动的DIV来实现这种布局。

如果服务器端代码通过了中途点（当前索引＆gt; =长度的一半），服务器端代码将迭代这些项并创建一个新的DIV。

生成的HTML如下所示：

<div class="container">
  <div class="column">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
  <div class="column">
    <div>Item 4</div>
    <div>Item 5</div>
  </div>
  <div style="clear: both"></div>
</div>

CSS：

.column { float: left; }

服务器端将确定何时关闭并创建新的DIV。不漂亮，但它确实有效。

自动填充两列

2 个答案: