Inline <div> elements with pure CSS

Question

I have a table structure where columns represent logical entities. For my use case, these are table rows that should be visually grouped, preferably by inserting them into a row.

An example of the source fragment:

<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> 

Desired layout:

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

Of course, it is easy to convert a document on the server side solely for presentation, but I wonder if I can keep the hierarchy of documents as they are and make the transformation at the presentation level (CSS). Is it possible?

Answer 1

As mentioned in your comment and in other answers, it is trivial to put whole .entities elements in the form of inline blocks or float them to align their contents in rows resembling a correct table. (Oddly enough, you cannot copy this layout using the properties of the CSS2.1 table .)

However, if you need to lay each content element inside a row so that each row does not act as a row in the table, and not just a row of boxes, as shown in the diagram, this is not possible with your structure due to the fact that the built-in formatting works in CSS. Restructuring your content to fit such a layout is as simple as placing the content line by line rather than by column, which I'm sure you covered, so I won’t go into it.

From spec :

Elements at the line level are those elements of the original document that do not form new blocks of content; content is distributed across lines (for example, selected fragments of text within a paragraph, embedded images, etc.). The following display property values ​​display the inline-level element: 'inline', 'inline-table' and 'inline-block'. Line-level items generate line-level boxes, which are blocks that participate in the context of inline formatting.

Inline formatting context can usually be generated only by a block of box blocks:

The block container field contains only block level locks or sets the built-in formatting context and thus contains only lines at the line level.

In your structure, each div only generates possible container containers of blocks. So, the first .entities contains its two children, as well as for the second and third for its children. You cannot pass children to different blocks that are siblings, so you cannot distribute children to different elements on the same line, even if you force them all to display: inline or force content to be added to display: inline-block .

Note that the top-level div element also creates an inline formatting context, but it cannot be used by your internal elements in the same way for the same reason.

In addition, to refer to this part of your bonus application:

There are quite a few devices in CSS that change the flow and alignment of boxes.

Unfortunately, this is not possible even with flexbox , since flexible containers work similarly to block containers and are therefore subject to the same restrictions described above for line-level descendants.

This may be somewhat feasible with CSS areas , but I'm not familiar with this module, and there is too little support for it to make a difference at this time anyway (even compared to flexbox).

Answer 2

How about this:

 .entities{ display:inline-block; } 

but this gives the following format:

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

if you need the format you want, you can change your HTML code a bit:

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

this gives the following layout:

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

well, if you want to use the same HTML code as you, then the answer will be no ...

what you wanted, hope this helps!

Answer 3

<div> are boxes, so I'm not sure that you can get the alignment you are looking for without individually styling each <div> cell. Closest I can get closer to what you want by connecting class="heading" to the entity <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;} 

but it just infers the table from the <div> elements.

If you are creating a table structure, why not use a <table> ? Of course, if the borders of the border do not match,

Answer 4

Give cell class names along with strings

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

This should work if you have a general idea of ​​the width required for each column.

Answer 5

Mayby :nth-child() with clear:left may help you

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

JSFiddle link

Answer 6

Sorry if I do not answer the css question directly, but I want to expand the prospect of using an html structure. (cannot leave comments)

I am a little puzzled by what you are trying to present with such data and this html structure, especially if you have large data sets. Since PHP + / SQL will be very useful in this case, as indicated in the comment above.

I want you to try to imagine relations between entities, 1 relation to each line. But I would say that for this purpose you structured your html in a rather peculiar way.

I did some research on issues related to what your html code has, and I made a fiddle to show you what I mean: "Relation-rows by entity-columns"

The html structure that I propose is the Anshuman proposed above. I recreated the structure that he mentioned, but made it so more pragmatic. I also appreciated potential problems, but also why this structure is better suited for this purpose. (At least the goal I took from your dataset.) Take a look at this here: "Relation-rows by entity-rows"

Answer 7

Hi, please blow the code, I solve your problem

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

}