我正在为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>
我的问题是,这是最佳选择,还是我可以寻求更简化的层次结构,或者可以从上面删除任何标签？
最佳答案
使用无序列表不是BAD方法,这样做的好处是禁用CSS的设备或浏览器(是的,您会感到惊讶)会优雅地降级为清晰的列表.如果您希望以上内容以3列的布局显示,并且每一行都显示在新的“行”上,那么我将为您的CSS尝试以下操作：
原文链接：/css/530808.html首先为您的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的下一行,以此类推,因为没有足够的空间在每行上浮动第4个了.
>如果您没有设置宽度,请将宽度转换为％,则可以使用< li>宽度设置为33％-没有< li>当然是填充-这将使您跨3< li>的宽度达到99％元素,因此第4位没有空格,它将环绕到下一行！
