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

我正在为Django项目创建模板,并且需要仅使用CSS而不是< table>来创建HTML中的三列表格.元件.

除了在意识形态上对表格的反对之外,其原因是该报告需要在台式机以及BlackBerry等手持设备上进行查看.在掌上电脑中,目标不是将表分成三个连续的段落,而不是试图在微小的屏幕上强制显示三列.

以前,我使用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>

在屏幕上,这将提供一个三列的表格,其中包含文章列表.对于每篇文章(行),我们都有：

>第一列包含公司名称
>第二栏包含主题和文章摘要
>第三栏包含原始出版物,出版日期和页码.

当在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样式的一种好方法是提供三列,每列一列,并在新行上将其显示为连续的段落？

最佳答案

使用无序列表不是BAD方法,这样做的好处是禁用CSS的设备或浏览器(是的,您会感到惊讶)会优雅地降级为清晰的列表.如果您希望以上内容以3列的布局显示,并且每一行都显示在新的“行”上,那么我将为您的CSS尝试以下操作：

首先为您的ul提供一个ID属性,因此在本例中,我们将其称为< ul id =“ fakeTable”&gt ;,然后我们可以设置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的下一行,以此类推,因为没有足够的空间在每行上浮动第4个了.
>如果您没有设置宽度,请将宽度转换为％,则可以使用< li>宽度设置为33％-没有< li>当然是填充-这将使您跨3< li>的宽度达到99％元素,因此第4位没有空格,它将环绕到下一行！