html - 仅使用 CSS 创建三列表？ (没有表格元素)

Question

我正在为 Django 元素创建模板，我需要在 HTML 中创建一个包含三列的表格，只使用 CSS，而不是 <table>元素。

除了在意识形态上反对表格之外，原因还在于报告需要在台式机和手持设备(如黑莓手机)上查看。在手持设备上，不是试图在一个小屏幕上强制显示三列，而是将表格分解成一系列连续的段落。

以前，我使用 Less 框架 ( http://lessframework.com/ ) 破解了一个快速/不完善的模板。

            {% for category in article_list_categorised %}
                    <h2 class="first">{{ category.grouper }}</h2>
                            {% for item in category.list %}
                                    <h3 class="two first">{{ item.firms.all|join:", " }}</h3>
                                    <h4 class="two">{{ item.subject }}</h4>
                                    <p class="seven">
                                            {{ item.abstract }}
                                    </p>
                                    <h4 class="one">{{ item.source_publication }}</h4>
                                    <h4 class="one">{{ item.publication_date }}</h4>
                                    <h4 class="one">Page: {{ item.page_number }}</h4>
                            {% endfor %}
            {% endfor %}

            <footer>
                    <p class="four off-four">
                            {% now "l, jS F Y" %}
                    </p>
            </footer>

在屏幕上，这给出了一个包含文章列表的三列表格。对于每篇文章(行)，我们有:

1. 第一列包含公司名称
2. 第二列包含主题和文章摘要
3. 第三列包含来源出版物、出版日期和页码。

当显示在 BlackbBerry 浏览器上时，它会将连续段落中的列分开，并在彼此之上。

现在，我想不再使用 Less，而是从头开始制作标记/CSS。

我发现了另一个 StackOverflow 问题，询问类似的问题:

How to create three columns in css

那里的建议基本上是使用 <ul>和 <li> .我破解了这样的东西，两行，三列:

        <ul>
            <li> <!-- First row -->
                <ul>
                    <li>Deutsche Bank, Goldman Sachs JBWere</li>
                    <li>Costs</li>
                    <li>
                        <p>AAP</p>
                        <p>June 28, 2010</p>
                        <p>Page: 3</p>
                    </li>
                </ul>
            </li> <!-- End of first row -->
            <li> <!-- Second row -->
                <ul>
                    <li>Deutsche Bank</li>
                    <li>Plans</li>
                    <li>
                        <p>Bloomberg</p>
                        <p>June 29, 2010</p>
                        <p>Page: 1</p>
                    </li>
                </ul>
            </li> <!-- End of Second row -->
        </ul>

我的问题是，这是最优的，还是我可以寻求更精简的层次结构，或者我可以从上面删除任何标签？

此外，上述问题中引用的文章讨论了三列，一行。我需要三列，每篇文章各占一行。

什么是对上述内容进行 CSS 样式设置的好方法，提供三列，每列在一个新行上，并且仍然在手持设备上显示为连续的段落？

Answer 1

使用无序列表并不是一种糟糕的方法，这样做的好处是禁用 CSS 的设备或浏览器(是的，您会感到惊讶)会优雅地降级为一个清晰的列表。如果您希望上面的内容以 3 列布局显示，每一行都在一个新的“行”上，我会为您的 css 尝试这样的事情:

首先给你的 ul 一个 ID 属性，所以在我们的例子中我们称之为 <ul id="fakeTable"> ，然后我们可以设置 li 元素的样式以充当表格单元格:

#fakeTable, #faketable li{
  list-style-type:none; //no bullets etc
  margin:0;
  padding:0;
  }

#fakeTable{
  width:800px; //you could set it to any width really, just an example
  }

#fakeTable li{
  display:block;
  float:left;
  clear:none;
  width:200px;
  padding:0 11px 0 11px;
  }

• 现在假设您的 <ul>宽度为 800 像素，<li>元素将从 4 到 6、7 到 9 等换行到下一行，因为没有更多空间可以在每行上 float 第 4 个元素。

• 如果您没有设置宽度，将宽度转换为 %，您可以得到 <li>宽度设置为 33% - 没有 <li>当然是填充 - 这会给你 99% 的宽度跨越 3 <li>元素，所以第 4 个没有空格，它将换行到下一行!