菜单项向左和向下浮动

Question

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

如果我将 clear:left 添加到第三个小项目，我会得到：

我想要的是第二个和第四个（或第三个和第四个）小项目漂浮在其他两个下面，就像这样：

有没有办法用 css 做到这一点？菜单是动态创建的，因此强制特定位置不起作用，它需要能够流入正确的位置。

Answer 1

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

Answer 2

多个 <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 3

试试这个

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

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

菜单项向左和向下浮动

Menu items float left and down

css

css-float