Встроенные элементы столбца <div>с чистым CSS

Question

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

Пример исходного фрагмента:

<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). Это вообще возможно?

Answer 1

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

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

Из spec :

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

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

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

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

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

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

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

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

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

Answer 2

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

.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 кактогда вы ответили: нет ...

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

Answer 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>?Если, конечно, не смещены границы столбцов, конечно.

Answer 4

Mayby :nth-child() с clear:left может помочь вам

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

JSFiddle link

Answer 5

Дайте имена классов 'ячейки' вместе с 'строками'

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

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

Answer 6

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

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

}

Answer 7

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

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

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

Я провел некоторое исследование по вопросам структуры, которая есть в вашем html-коде, и я сделал скрипку, чтобы показать вам, что я имею в виду: <a href="http://jsfiddle.net/litmind/nn3mD/3/" rel="nofollow noreferrer">"Relation-rows by entity-columns"</a>

Предлагаемая мной HTML-структура - это Аньшуман, предложенная выше . Я воссоздал структуру, которую он упомянул, но сделал это более прагматично. Я также оценил потенциальные проблемы, а также почему эта структура лучше подходит для этой цели. (По крайней мере, цель, которую я понял из вашего набора данных.) Посмотрите на это здесь: <a href="http://jsfiddle.net/litmind/dLFwK/6/" rel="nofollow noreferrer">"Relation-rows by entity-rows"</a>