css问题,li填充排列

如图，想实现 abc4 和abc5直接对齐到asd的下面，abc8、abc9依次向上，该如何实现
代码如下

<style>
ul{width:500px;height:auto;}
li{float:left;border:1px solid #000;width:120px;height:220px;}
</style>
<ul>
<li>abc1</li>
<li style="width:250px;height:70px;">asd</li>
<li>abc2</li>
<li>abc3</li>
<li>abc4</li>
<li>abc5</li>
<li>abc6</li>
<li>abc7</li>
<li>abc8</li>
<li>abc9</li>
</ul>

想要实现这个效果需要一定限制：
1、瀑布流，竖向自动排列，可以实现这样的效果。先分为4栏横向排列，在每栏里建立元素，这样就能够竖向自动排列
2、绝对定位，将每个元素的位置设置好，定死
3、li的形式按照你的代码写，完全自适应有难度，因为浏览器布局的原理就是先横向对齐，先形成一行，才铺满元素，所以每个元素在发生变化、或者以后发生变化，定位依然会出问题。

建议用1方法，可能会好一些，但代码的循环输出可能会出问题，这个就需要一些js脚本插件来配合了，可以百度一下 瀑布流 插件。
如果这个页面以后无论如何都保持原样，那么可以用2 方法，做起来轻松容易准确。

温馨提示：内容为网友见解，仅供参考

当前网址：https://22.t2y.org/zz/t0xxc2xix6xh6ffhtf.html