Html 将堆栈li元素包装到div中

我有如下html：

<ul class="edit-list">
      <li>
        <i class="icon"></i>
        <div class="frame"> 
            <img>
        </div>
      </li>
     <li>
        <i class="icon"></i>
        <div class="frame">
            <img>
        </div>
      </li>
     <li>
        <i class="icon"></i>
        <div class="frame">
            <img>
        </div>
      </li>
</ul>

我已经设法让它看起来像这样：

<ul class="edit-list">
      <li>
        <i class="icon"></i>
        <div class="frame"> 
            <img>
        </div>
      </li>
     <li>
        <i class="icon"></i>
        <div class="frame">
            <img>
        </div>
      </li>
     <li>
        <i class="icon"></i>
        <div class="frame">
            <img>
        </div>
      </li>
</ul>

我想要的外观如下：

<ul class="edit-list">
      <li>
        <i class="icon"></i>
        <div class="frame"> 
            <img>
        </div>
      </li>
     <li>
        <i class="icon"></i>
        <div class="frame">
            <img>
        </div>
      </li>
     <li>
        <i class="icon"></i>
        <div class="frame">
            <img>
        </div>
      </li>
</ul>

因此，第一个元素比另一个元素大2倍，其余元素应该一个接一个地堆叠在第二行中，通常彼此相邻

完全可以使用float

* { 保证金：0； 填充：0； } 保险商实验室{ 保证金：0； 宽度：400px； 保证金：25像素自动； 列表样式类型：无； 溢出：隐藏； } 李{ 浮动：左； } .框架{ 宽度：100px； 高度：100px； 背景：丽贝卡紫； 利润率：10px； } .大{ 宽度：220px； 高度：220px； }

---

你现有的CSS在哪里？看起来简单的浮动应该可以解决这个问题。