菜单项左右浮动

Question

我正在使用无序列表创建一个菜单，该列表混合了不同大小的列表项，有些是其他项的高度和宽度的一半。他们都向左漂浮。我得到的是这样的：

如果我添加清除：左边第三个小项我得到这个：

我想要的是第二个和第四个（或第三个和第四个）小物品漂浮在另外两个之下，如下所示：

有没有办法用css做到这一点？菜单是动态创建的，因此迫使某个特定位置无法工作，它需要能够流入正确的位置。

Answer 1

多个<ul/>会为您效力吗？如果是这样，以下Codepen将起作用：https://codepen.io/anon/pen/qPaVar

与嵌入式代码段相同的代码：

ul {
  list-style : none;
  padding: 0;
  margin: 0;
  text-align: center
}

li {
  margin: 0
}

li.left {
  float: left
}

div.small {
  background-color: blue;
  width: 20px;
  height: 20px
}

div.large {
  background-color: yellow;
  width: 40px;
  height: 40px;
}

<ul>
  <li class="left">
    <div class="large">A</div>
  </li>
  <li class="left">
    <ul>
      <li class="left">
        <div class="small">1</div>
      </li>
      <li class="left">
        <div class="small">2</div>
      </li>
    </ul>
    <ul>
      <li class="left">
        <div class="small">3</div>
      </li>
      <li class="left">
        <div class="small">4</div>
      </li>
    </ul>
  </li>
  <li class="left">
    <div class="large">B</div>
  </li>
</ul>

希望这有帮助！

Answer 2

试试grid-auto-flow: dense https://developer.mozilla.org/ru/docs/Web/CSS/grid-auto-flow

Answer 3

试试这个

＆＃13;

＆＃13;

.main li {
  display: inline-block;
  vertical-align: middle !important;
  width: 200px;
  height: 200px;
  border: 1px solid;
}

.inner-div li {
  width: 99px;
  height: 89px;
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
  text-align: center;
}

ul.inner-div {
  list-style: none;
  padding: 0;
}

＆＃13;

<div class="container">
  <ul class="main">
    <li>div 1</li>
    <li>div 2
      <ul class="inner-div">
        <li>div 21</li>
        <li>div 21</li>
        <li>div 21</li>
        <li>div 21</li>
      </ul>
    </li>
    <li>div 3</li>


  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;