Display a div element between a group of list elements without changing the HTML (to keep it semantic)

Question

I have a list of products besides blue.

Blue is an information block from a company that is not associated with the specified product at all.

So it’s logical to keep it semantic, I write it like this.

<ul> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> </ul> <div> <!-- the blue colored box here --> </div> 

However, with this arrangement, the blue color will be displayed after the products, while the design requires me to place it between the products.

Is it possible to make this design semantically without doing crazy things, for example, using position: absolute ?

Answer 1

Yes, you can just add float: right to the div and place the div before ul in HTML

 ul, li, body, html{ margin: 0; padding: 0; } * { box-sizing: border-box; } li { width: 33.33%; border: 1px solid black; height: 100px; float: left; } div { width: 33.33%; border: 1px solid black; height: 100px; background: blue; float: right; } 

 <div> <!-- the blue colored box here --> </div> <ul> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> </ul> 

Answer 2

Although this is not as semantically correct as your HTML, perhaps this is an acceptable compromise:

Put the blue info block last in the list. It will never appear between any product elements in the source. It will take a permanent place at the end.

Then use the flex order property to rearrange it somewhere among the list items only on the screen.

 ul { display: flex; flex-wrap: wrap; padding: 0; } li { flex: 0 0 30%; margin: 5px; height: 150px; background-color: lightgreen; border: 1px solid #ccc; list-style-type: none; } li:first-child { order: -3; } li:nth-child(2) { order: -2; } li:last-child { order: -1; background-color: aqua; } 

 <ul> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- the blue colored box here --> </li> </ul> 

From the specification:

5.4. Display order : order property

Flex items are displayed and laid out by default in the same order as in the original document. You can use the order property to change this order .

The order property controls the order in which children of the flexible container appear in the flex container, assigning them to ordinal groups. It takes a single integer value that indicates which ordinal group the flex element belongs to.

The initial order value for all flex elements is 0. Only the visual screen affects the screen; DOM does not change.

Answer 3

If flexibility is right for you, you can insert a div in the last li (or just use the last li) so that it can be part of flexbox .

From there, you can use order to set the field in the third position:

https://developer.mozilla.org/en-US/docs/Web/CSS/order Example:

 ul { display: flex; flex-flow: row wrap; padding: 0; justify-content: space-around; } li { width: 33%; border: solid 1px black; margin: 5px 0 0; box-sizing: border-box; display: block; /* reset from list-item */ /* demo */ min-height: 75px; order: 2; } li:nth-child(1), li:nth-child(2) { order: -1; } li:last-of-type { order: 0; background: blue; color: white; } /* extra demo purpose */ /* center li content ? */ li { display: flex; justify-content: center; align-items: center; } /* give a number to each box to see where they stand */ ul { counter-reset: lis; } li:before { counter-increment: lis; content: counter(lis); font-weight:bold; } 

 <ul> <li>-- product goes here --></li> <li>-- product goes here --></li> <li>-- product goes here --></li> <li>-- product goes here --></li> <li>-- product goes here --></li> <li> <div>-- the blue colored box here --></div> </li> </ul> 

Otherwise, the position of the float will be what you need to set the div forward in the stream

If the elements have a known size, then absolute and either:

• float + pseudo
• or flex + pseudo + order

may also be an option, but I would not recommend it at all, as many things can break it and allow overflow of content.

Answer 4

A simple solution:

 <ul> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- the blue colored box here --> </li> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> <li> <!-- product goes here --> </li> </ul> 

Instead of just writing a separate div, also if it requires a special function, just add another class to the rest of the list items.