Inline column elements with pure CSS

I have a table-like structure where the columns represent the logical entities. For my use case, it’s the table rows that need to be visually grouped, preferably by flowing them inline. Example source fragment:

 
 
Ab
 
Cdefg
 
 
98224
 
511
 
 
αβγδ
 
ε
 
 
 

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

Of course, it is easy to transform the document on the server-side purely for the presentation, but I wonder if I can keep the document hierarchy as it is and do the transformation on the (CSS) presentation layer. Is it at all possible?

adding php to the script will work better, that’s my opnion. you can use looping there with in loop you will be able to apply CSS rules..that’s an idea man..

Well, you can already get quite close with this CSS fragment: .entities < display: inline-block; >. The question is if it’s actually possible to make the «rows» flow inline as shown in the example.

No clue why this would have 2 downvotes. It seems pretty clear to me, and if the downvotes came previously, the question didn’t seem that bad when it was first asked either.

Assuming you wanted a super quick fix..you could duplicate your markup (not recommended though) like this (I had to change ids as well)

7 Answers 7

As mentioned in your comment and in the other answers, it’s trivial to lay entire .entities elements as inline blocks or to float them in order to line up their contents in rows, resembling a proper table. (Ironically, you can’t replicate this layout using CSS2.1 table properties.)

However, if you need to lay each content element inline such that each row does not act like a table row rather than simply a line of boxes, as shown in your diagram, it’s not possible with your given structure due to the way inline formatting works in CSS. Restructuring your content to accommodate such a layout is as simple as arranging the content by row and not by column, which I’m sure you have covered so I won’t get into that.

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the ‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

An inline formatting context can typically only be generated by a block container box:

A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.

In your structure, the only possible block container boxes are generated by each div . So the first .entities contains its own two children, and likewise for the second and third for their own children. You cannot transfer child elements across different containing blocks that are siblings, therefore you cannot distribute children of different elements across the same line, even if you force all of them to display: inline or if you force the content elements to display: inline-block .

Note that the top-level div element creates an inline formatting context as well but it cannot be used by your inner elements in this manner for the same reason.

Also, to address this part of your bounty statement:

CSS does have quite a few devices that alter the flow and alignment of boxes.

Unfortunately, this isn’t possible even with flexbox, as flex containers work similarly to block containers and are therefore subject to the same limitations described above with respect to inline-level descendants.

This may be doable to a certain extent with CSS regions, but I’m not familiar with that module, and there’s too little support for it to be relevant at this time anyway (even compared to flexbox).

Источник

How to Create Two Inline-Block Columns With 50% Width

It is possible to create two inline-block columns having 50% width and avoid floats. It’s quite easy to do. You need to set the width of both columns to 50%, and set the display to “inline-block”. Also, add the clear property with the «both» value.

Example of adding two inline-block columns with 50% width:

html> html> head> title>Title of the document title> style> .clear < clear: both; > .clear div < width: 50%; display: inline-block; > #col1 < background-color: #3ad67d; float: left; > #col2 < background-color: #d5d6e6; > style> head> body> div class="clear"> div id="col1">Text 1 div> div id="col2">Text 2 div> div> body> html>

Result

So, in this way, you can have two columns, both having 50% width and avoid the wrapping of the second column.

Let’s see another example, where we use the flex-basis property set to 50%.

Example of creating two columns with 50% width by using the flex-basis property:

html> html> head> title>Title of the document title> style> .flex < display: flex; > .flex div < flex-basis: 50%; display: inline-block; > #col1 < background-color: #3ad67d; > #col2 < background-color: #d5d6e6; > style> head> body> div class="flex"> div id="col1">Text 1 div> div id="col2">Text 2 div> div> body> html>

Источник

css » display: inline-block for 3 column»

I was wondering everytime I set a width in the first column of my display-inline-block CSS method, the other column will go down for how many pixel but if I use padding instead of width the other column will not go down. Can someone explain me why is this happening? NEWBIE Here The first picture using width in the first column Second image using padding The Code

body < font-family: "Arial",Helvetica, sans-serif, serif; color: white; background: gray; margin: 0; >div.wrapper < border: 3px black dashed; >/*===============header===================*/ header.main-header < border: 2px pink dashed; >h1.main-h1 < margin: 10px 0 0 0; border: 1px black solid; text-align: center; >p.p-header < font-style: italic; margin-top: 0; padding-left: 57.5%; position: absolute; top: 27px; line-height: 12px; >/*==============end of header============*/ /*==============navigation bar===========*/ nav.main-nav < border: 2px green solid; text-align: center; >p.p-nav < margin: 0; right: 1%; >/*============end of navigation=========*/ /*============section===================*/ div.column < border: 2px blue dashed; >section.second-column, section.third-column, section.first-column < border: 2px brown solid; display: inline-block; height: 450px; >section.first-column < padding-right: 4%; margin-left: 1%; >section.second-column < width: 60%; margin-left: 1%; >section.third-column < width: 20%; margin-left: 1%; >/*==============footer==================*/ footer.main-footer < border: 1px white solid; text-align: center; clear: both; >/*=============end of footer===========*/

        
 
Typhography
 
learning things
with showe
 
  
This is first column
 
This is second column
 
This is third column
 
  
  

Источник

Chrome 52 CSS issue with inline-block and columns

After updating to Chrome 52, a website I’m working on renders columns incorrectly. I use the display: inline-block ‘hack’ to force column break/force the flow of text. It used to work fine in the latest browsers (Chrome, Firefox, IE 11), but stopped working as of Chrome 52. Version 51 was fine. FF and IE nicely split the columns, Chrome 52 displays only 1 column. I tried using display: table; without much success.

• Took a ride from Keflavik airport through Akranes around Akrafjall to our accomodation in the north. 
• On the way we stopped by at the Kolugljúfur waterfall and Pingeyrar chuch. Around 11 p.m., during our ‘night’ hike, we saw an artic fox behind our house.

• Took a ride around the Siglufjörður, a small fishing town on the northern coast, where we had a quick stop, and then through the second largest city in Iceland — Akureyri
• We visited Glaumbær  — Skagafjörður Folk Museum and had a cake and a cup of coffee in a lovely cafe in a traditional house nearby.
• Then we went to see the Goðafoss, one of the most spectacular waterfalls in Iceland.

• ay of whales and puffins! Early in the morning we went to Husavik and took a boat to observe the whales and puffins. I saw the tail and white belly of a whale and bunch of puffins. Our boat-guide told us not to eat any whale or puffin, because of the quickly decreasing number of whales living in the ocean around Iceland, and I agreed. Nice guy, I thought.

• Later that day we hiked Krafla vulcano and saw a nice Viti Crater along the way. But the highlight of the day came only in the evening — bathing in Mývatn Nature Baths — eutrophic lake situated in an area of active volcano activity. That was the best time on Iceland for me. Steaming natural water, fresh air, bathing till late at night. What could be better?

• Day of lava! Went to the Leirhnjukur Lava Fields and Hverir steam fields. There was a collection of steam fumaroles, some bubbling mud pots and lots of interesting colours.
• Took a ride to the east — our next accomodation at Gíslastaðir awaits.

Источник