Я создаю шаблоны для проекта Django, и мне нужно создать таблицу из трех столбцов в HTML, используя только CSS, а не элемент <table>.
Причина, за исключением любых идеологическихПротивоположность таблицам заключается в том, что отчет необходимо просматривать как на настольных компьютерах, так и на портативных устройствах, таких как 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, задающий что-то похожее:
Как создать три столбца в 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>
Myвопрос в том,или, может быть, есть какая-то более упорядоченная иерархия, к которой я мог бы обратиться, или какие-либо теги, которые я могу исключить из вышеперечисленного?
Кроме того, в статье, упомянутой в предыдущем вопросе, говорится о трех столбцах с одной строкой.Мне нужно три столбца, с новой строкой для каждой статьи.
Какой хороший способ CSS-стилизации выше, чтобы дать три столбца, каждый из которых установлен в новой строке, и при этом отображать их как последовательные абзацына КПК?