创建只有CSS的三列表？ （无表元素） [英] Creating three-column table with CSS only? (No table element)

问题描述

我正在为Django项目创建模板，我需要使用CSS而不是< table> 元素在HTML中创建三列表

I'm creating templates for a Django project, and I need to create a three column table in HTML, using just CSS, rather than a <table> element.

除了对表的意识形态反对之外，原因是报表需要在桌面和手持设备（如BlackBerry）上查看。在手持设备上，而不是试图强迫三个柱子在一个微小的屏幕上，目标是将表分成一系列连续的段落。

The reason, apart from any ideological opposition to tables, is that the report needs to be viewed on both desktops as well as handheld devices such as BlackBerry. On handhelds, rather than trying to force three columsn on a minuscule screen, the objective is to break up the table into a series of consecutive paragraphs.

以前，我使用Less框架破解了一个快速/脏的模板（ http://lessframework.com/ ）。

Previously, I'd hacked a quick/dirty template out using the Less framework (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>

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

On screen, this gives a three column table, containing a list of articles. For each article (row), we have:

1. 第一列包含公司名称


2. 栏包含主题和文章摘要


3. 第三栏包含来源出版物，发布日期和页码。

当显示在BlackbBerry浏览器上时，它会将连续段落中的列分成上下两列。

And when displayed on the BlackbBerry browser, it breaks up the columns in consecutive paragraphs, on top of each other.

现在，

我发现了另一个StackOverflow问题，询问类似的东西：

I found another StackOverflow question asking something similar:

如何在css中创建三列

，其中的建议基本上是使用< ul> 和< li> 。我已经砍掉了这样，两行，三列：

and the advice from there is basically to use <ul> and <li>. I've hacked out something like this, two rows, three columns:

        <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>

我的问题是，这是最佳的，还是可能有一个更精简的层次结构我可以去，或者我可以从上面除去的任何标签？

My question is, is this optimal, or is there perhaps a more streamlined hierarchy I could go for, or any tags I can strip out of the above?

此外，上述问题中引用的文章涉及三列，一行。我需要三个列，每个文章都有一个新行。

Also, the article referenced in the above question talks about three columns, with one row. I need three columns, with a new row for each article.

上面的CSS样式是一个很好的方法，给出三列，每列设置在一个新行

What's a good way of CSS styling the above, to give three columns, with each set on a new row, and still have it display as consecutive paragraphs on handhelds?

推荐答案

解决方案

使用无序列表不是一个BAD方法，这样做的好处是，设备或浏览器禁用CSS（yep，你会惊讶）会降级到一个清晰的列表。如果你想上面显示在一个3行的布局，每一行在一个新的行，我会尝试这样的你的CSS：

Using an unordered list is not a BAD method, and the benefit of this is that devices or browsers with CSS disabled (yep, you'll be surprised) will degrade gracefully into a legible list. If you wanted the above to display in a 3 column layout with each row on a new "line" I would try something like this for your css:

首先给你的ul ID属性，因此在我们的例子中，我们将它称为< ul id =fakeTable> ，然后我们可以将li元素设置为表格单元格：

First give your ul an ID attribute, so in our case we'll call it <ul id="fakeTable">, and then we can style our li elements to act as table cells:

#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;
  }

• $ c>< ul> 的宽度为800px，则< li> 元素将包装到从4到6， 9等，因为没有更多的空间在每一行上浮动第四个。

  • Now assuming your <ul> is 800px wide, the <li> elements will wrap to the next line from 4 to 6, 7 to 9 etc as there is no more space to float a 4th one on each row.

    如果没有设置宽度，您可以将< li> 的宽度设置为33％ - 当然没有< li> 这将给你在3 < li> 元素的宽度为99％，所以没有空格为第4，它将包装到下一行！

    If you do not have a set width, convert the widths to %, you could have the <li> width set to 33% - with no <li> padding of course - which will give you a width of 99% across 3 <li> elements, so no space for a 4th, and it will wrap to the next line!

    这篇关于创建只有CSS的三列表？ （无表元素）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！