Встроенные элементы столбцов с чистым CSS

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

пример фрагмент источник:

<div>
  <div id="entity1" class="entities">
    <div>Ab</div>
    <div>Cdefg</div>
  </div>
  <div id="entity2" class="entities">
    <div>98224</div>
    <div>511</div>
  </div>
  <div id="entity3" class="entities">
    <div>αβγδ</div>
    <div>ε</div>
  </div>
</div>

нужный макет:

+----+-------+------+
| Ab | 98224 | αβγδ |
+----+--+----++---+-+
| Cdefg | 511 | ε |
+-------+-----+---+

конечно, легко преобразовать документ на стороне сервера исключительно для презентации, но мне интересно, могу ли я сохранить иерархию документов как есть и сделать преобразование на уровне представления (CSS). Возможно ли это вообще?

6
css dom html

7 ответов

как упоминалось в вашем комментарии и в других ответах, тривиально закладывать весь .entities элементы как встроенные блоки или плавающие их, чтобы выровнять их содержимое в строки, напоминающие правильную таблицу. (По иронии судьбы, вы Не могу реплицировать этот макет с помощью CSS2.1 свойства таблицы.)

однако, если вам нужно заложить каждый элемент содержимого в строку так, чтобы каждая строка не действовала как строка таблицы, а не просто строка of коробки, как показано на диаграмме, это невозможно с данной структурой из-за того, как встроенное форматирование работает в CSS. Реструктуризация вашего контента для размещения такого макета так же проста, как организация контента по строкам, а не по столбцам, которые, я уверен, вы покрыли, поэтому я не буду вдаваться в это.

С spec:

элементы встроенного уровня те элементы исходного документа, которые не образуют новых блоков содержание; содержание распределяется в строках(например, подчеркнутые фрагменты текста в абзаце, встроенные изображения и т. д.). Следующие значения свойства "display" делают элемент встроенным: "inline", "inline-table" и "inline-block". Элементы встроенного уровня генерируют встроенные коробки, которые являются полями, которые участвуют во встроенном контексте форматирования.

An встроенный контекст форматирования обычно может генерироваться только блок контейнер:

A блок контейнер box либо содержит только блоки уровня или устанавливает контекст встроенного форматирования и, таким образом, содержит только встроенные поля уровня.

в вашей структуре, единственные возможные коробки контейнера блока произведены каждым div. Итак, первый .entities содержит своих собственных двух детей, а также для второго и третьего для своих собственных детей. Нельзя передать ребенка элементы по разным содержащим блокам, которые являются братьями и сестрами, поэтому вы не можете распределять потомков разных элементов по одной линии, даже если вы заставляете их всех display: inline или если элементы контента display: inline-block.

обратите внимание, что верхний уровень div элемент также создает встроенный контекст форматирования, но он не может использоваться вашими внутренними элементами таким образом по той же причине.

кроме того, чтобы решить эту часть вашей щедрости заявление:

CSS имеет довольно много устройств, которые изменяют поток и выравнивание ящиков.

к сожалению, это невозможно даже с flexbox, поскольку контейнеры flex работают аналогично контейнерам блоков и поэтому подвержены тем же ограничениям, описанным выше в отношении потомков встроенного уровня.

этой мая будут выполняться в определенной степени с области CSS, но я не знаком с этим модулем, и слишком мало поддержки для него, чтобы быть актуальным в это время (даже по сравнению с flexbox).

6

как насчет этого:

.entities{
display:inline-block;
}

но это дает следующий формат:

+-------+-------+------+
| Ab    | 98224 | αβγδ |
+-------+-------+------+
| Cdefg | 511   | ε    |   
+-------+-------+---+--+

если вы хотите формат, который вы хотите, то вы можете изменить свой HTML-код немного:

    <div>
  <div id="entity1" class="entities">
    <span class="cell">Ab</span>        
    <span class="cell">98224</span>
    <span class="cell">αβγδ</span>
  </div>
  <div id="entity2" class="entities">
    <span class="cell">Cdefg</span>
    <span class="cell">511</span>
    <span class="cell">ε</span>
  </div>
  <div id="entity3" class="entities"> 
  </div>
</div>

CSS:

.cell{
display:inline-block;
}

это дает следующую структуру:

+----+-------+------+
| Ab | 98224 | αβγδ |
+----+--+----++---+-+
| Cdefg | 511 | ε |
+-------+-----+---+

ну, если вы хотите использовать тот же самый HTML, который вы предоставили, тогда ответ нет...

точный, который вы хотели, надеюсь, это помогло!

3

<div>S-это коробки, поэтому я не уверен, что вы сможете получить выравнивание, которое ищете, без укладки каждой ячейки <div> индивидуально. Самое близкое, что я могу приблизить, что вы хотите, это прикрепить class="heading" сущности <div>s:

HTML-код:

  <div id="entity1" class="heading">
    <div>Ab</div>
    <div>Cdefg</div>
  </div>

CSS:

div.heading {float: left;}
div.heading div {display: block; padding-right: 15px;}

но это просто делает стол из <div> элементы.

если вы создаете табличную структуру, почему бы не использовать <table>? Если криво конечно, границы столбцов важны.

2

дайте имена классов "ячеек" вместе с "строками"

<div>
  <div class="row" id="entity1">
    <div class="cell1">Ab</div>
    <div class="cell2">Cdefg</div>
  </div>
</div>

CSS:

.row {position:relative;}
.cell1 {width:33%;}
.cell2 {width:66%;}

Это должно работать, если у вас есть общее представление о ширине, необходимой для каждого столбца.

1

определенный :nth-child() С clear:left может помочь вам

.container div:nth-child(4n){clear:left;}

JSFiddle ссылке

1

Извините, если я не отвечаю на css-вопрос напрямую, но я хочу расширить перспективу использования html-структуры. (не могу оставлять комментарии)

Я немного озадачен тем, что вы пытаетесь представить с такими данными и этой структурой html, особенно если у вас есть большие наборы данных. потому что PHP+ / SQL сделает вам так много хорошего в этом случае, как указано в комментарии выше.

Я quessing что вы пытаетесь представить отношения между субъектами, 1 отношение в каждой строке. Но я бы сказал, что вы структурировали свой html довольно своеобразным образом для этой цели.

Я провел некоторые исследования по вопросам о структуре, которую имеет ваш html-код, и я сделал скрипку, чтобы показать вам, что я имею в виду:"Relation-rows by entity-columns"

структура html, которую я предлагаю, является одной Аншуман предложил выше. Я воссоздал структуру, о которой он упоминал, но сделал это так в более прагматичный способ. Я также оценил потенциальные проблемы, но и почему эта структура лучше подходит для этой цели. (Хотяб целью я проглядывал из набора данных.) Посмотри здесь: "Relation-rows by entity-rows"

0

привет, пожалуйста, поток взорвал код, я вещь решить вашу проблему

.entities{
display: inline;
float: left;
position: relative;
clear: right;

}

0