在一组列表项之间显示div元素而不改变HTML(保持语义)

Question

我有一个产品清单,除了蓝色产品.

蓝色是公司的信息块,与所列产品完全无关.

从逻辑上讲,为了保持语义,我就是这样写的.

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

然而,通过这种安排,蓝色的盒子将在产品之后显示,而设计要求我将它放在产品之间.

是否有可能在语义上进行这种设计,而不会像使用一样疯狂的东西position: absolute？

Answer 1

是的，只需添加float: right到HTML 中div并放在div前面即可ul

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>