Question

我正在为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样式有什么好方法，给出三列，每一组都在一个新行上，并且仍然在手持设备上显示为连续段落？

Answer 1

使用无序列表不是一种BAD方法，这样做的好处是禁用了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>宽度为800px，<li>元素将换行到4到6,7到9等下一行，因为没有更多空间可以浮动第4行每行一个。
如果您没有设置宽度，请将宽度转换为％，您可以将<li>宽度设置为33％ - 当然没有<li>填充 - 这将给出你在3 <li>个元素中的宽度为99％，因此没有第4个空格，它将换行到下一行！

Answer 2

我会选择3个div，每个div包含一列，给它们一个最小宽度和一个最大宽度，display: inline-block。如果屏幕足够大以容纳它们彼此相邻，它们将被布置为3列，否则，它们将堆叠。你需要为IE 6增加一些额外的黑客攻击（也可能是7），因为它不支持inline-block。

Answer 3

使用div创建多列布局非常简单，但您应该注意以下几点：

元素列的宽度之和（包括边距和填充）必须< 100％（或像素中主列的宽度）。
使用float：left（或右）确保列并排显示
使用clear元素确保以下元素的margin属性

示例：

  <div id="main">
    <div class="col 1st-col">
    </div>
    <div class="col 2nd-col">
    </div>
    ...
    <div class="clr"></div>
  </div>

.col {float：left;} .1st-col {宽度：30％; margin-left：1％} ....

.clr {background：url（'empty.gif'）;} / * empty.gif是一个gif图片（1px x 1px透明）* /

这肯定适用于每个浏览器。 Div .clr用于修复FF，Chrome，IE6中div.main的高度。属性display：inline-block在IE中不起作用。

仅使用CSS创建三列表？（没有表格元素）

3 个答案:

仅使用CSS创建三列表？ （没有表格元素）

3 个答案:

仅使用CSS创建三列表？（没有表格元素）