Использование Div для отображения табличных данных

Question

Я хочу отобразить данные, подобные следующим:

 Title     Subject    Summary    Date

Так что мой HTML выглядит так:

<div class="title"></div>
<div class="subject"></div>
<div class="summary"></div>
<div class="date"></div>

Проблема в том, что весь текст не отображается в одной строке. Я пытался добавить display="block", но это не сработало.

Что я здесь не так делаю?

Важно: В этом случае я не хочу использовать элемент table, но придерживаюсь тегов div.

Answer 1

Свойство CSS float - это то, что вам нужно, если вы хотите расположить div по горизонтали.

Вот хороший урок по поплавкам: http://css.maxdesign.com.au/floatutorial/

Answer 2

Табличные данные также могут быть представлены как вложенные списки - то есть списки списков:

<ul>
    <li>
        heading 1
        <ul>
            <li>row 1 data</li>
            <li>row 2 data</li>
        <ul>
    </li>
    <li>
        heading 2
        <ul>
            <li>row 1 data</li>
            <li>row 2 data</li>
        <ul>
    </li>
</ul>

Который можно разметить как таблицу, а также семантически правильно (ish).

Answer 3

Причина, по которой страница вопросов о переполнении стека может использовать DIV, заключается в том, что счетчик голосов / ответов имеет фиксированную ширину.

Answer 4

Используя этот код:

<div class="title">MyTitle</div><div class="subject">MySubject</div><div class="Summary">MySummary</div>

У вас есть 2 решения (адаптировать селекторы CSS к вашему случаю):

1 - использовать встроенные блоки

div 
{
    display: inline;
}

Это приведет к тому, что блоки будут помещены в одну линию, но при этом вы не сможете контролировать их размеры.

2 - Использовать поплавок

div 
{
    width: 15%; /* size of each column : adapt */
    float: left; /* this make the block float at the left of the next one */
}

div.last_element /* last_element must be a class of the last div of your line */
{
   clear: right; /* prevent your the next line to jump on the previous one */
}

Свойство float очень полезно для позиционирования CSS: http://www.w3schools.com/css/pr_class_float.asp

Answer 5

Вам нужно убедиться, что все ваши «ячейки» плавают влево или вправо (в зависимости от их внутреннего порядка), а также им нужна фиксированная ширина.

Также убедитесь, что их «строка» имеет фиксированную ширину, равную сумме ширины ячейки + поля + отступы.

И наконец, убедитесь, что на уровне таблицы находится фиксированная ширина, которая является суммой ширины строки + поля + отступов.

Но если вы хотите отображать табличные данные, вам действительно следует использовать таблицу, некоторые браузеры (более распространенные в предыдущем поколении) по-разному обрабатывают float, padding и margin (помните известную ошибку IE 6, которая удвоила поле?).

Здесь было много других вопросов о том, когда использовать, а когда не использовать таблицы, которые могут помочь объяснить, когда и где использовать div и таблицы.

Answer 6

Сначала display:block должно быть display:inline-block, хотя вы, возможно, уже поняли это. Во-вторых, вы также можете использовать display:table, display:table-cell, display:table-row и другие свойства. Хотя они не так хороши, как использование таблицы.

Answer 7

Вы должны использовать пролеты с:

display:inline-block

Это позволит вам установить ширину для каждого из элементов, сохраняя при этом их на одной линии. См. здесь , в частности этот раздел .

Теперь, чтобы успокоить downvoters - конечно, табличные данные должны быть в таблице. Но он очень конкретно НЕ ХОЧЕТ стол. Выше ответ на свой вопрос !!!

Answer 8

Чтобы текст отображался в одной строке, вы должны использовать display = "inline"

Более того, вы действительно должны использовать списки для достижения этого эффекта

<ul class="headers">
  <li>Title</li>
  <li>Subject</li>
  <li>Summary</li>
  <li>Date</li>
</ul>

Стиль будет выглядеть так:

.headers {утеплитель: 0; Маржа: 0}

.headers li {display: inline; padding: 0 10px} / Заполнение будет контролировать пространство по бокам текста в заголовке /

Answer 9

Предисловие: я до сих пор немного озадачен ответами, поскольку создание столбцов с использованием DIV и CSS довольно хорошо задокументировано, но не похоже, чтобы какие-либо ответы до сих пор покрывали то, что обычно делается. То, что вам нужно, это четыре отдельных DIVS, каждый с большим атрибутом «left:». Вы добавляете свои данные для каждого столбца в соответствующий DIV (столбец).

Вот сайт, который должен вам помочь. У них есть много примеров создания столбцов с тегами CSS / DIV: http://www.dynamicdrive.com/style/layouts/

Все, что вам нужно сделать, это экстраполировать их примеры из 2 столбцов на ваши потребности в 4 столбцах.

Answer 10

Я задал похожий вопрос некоторое время назад Календарь в HTML , и все мне сказали также использовать таблицы.

Если вы создали домашнюю страницу igoogle, просто наберите их код. Я сделал систему столбцов и разделов в столбцах для страницы. Обратите внимание, что с Google вы не можете иметь бесконечное количество столбцов, и это оскорбляет нашу восприимчивость как объектных людей. Вот некоторые из моих выводов:

• Вам нужно знать ширину столбцов
• Вам нужно знать количество столбцов
• Вам нужно знать ширину пространства, в котором живут колонны.
• Вы должны убедиться, что пробелы не переполняются

Я создал календарь с тегами DIV, потому что невозможно проверить XSL без жесткого кодирования максимального количества недель в месяце, , что очень оскорбительно .

---

Самая большая проблема в том, что каждый блок должен иметь одинаковую высоту, если вы хотите, чтобы какая-либо информация была связана с полем в вашей таблице с тегами div, которые вам понадобятся, чтобы убедиться, что whitespace:scroll или whitespace:hidden есть в CSS.