css问题,li填充排列
如图,想实现abc4和abc5直接对齐到asd的下面,abc8、abc9依次向上,该如何实现代码如下<style>ul{width:500px;height:auto;}...
如图,想实现 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> 展开
代码如下
<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> 展开
2个回答
展开全部
想要实现这个效果需要一定限制:
1、瀑布流,竖向自动排列,可以实现这样的效果。先分为4栏横向排列,在每栏里建立元素,这样就能够竖向自动排列
2、绝对定位,将每个元素的位置设置好,定死
3、li的形式按照你的代码写,完全自适应有难度,因为浏览器布局的原理就是先横向对齐,先形成一行,才铺满元素,所以每个元素在发生变化、或者以后发生变化,定位依然会出问题。
建议用1方法,可能会好一些,但代码的循环输出可能会出问题,这个就需要一些js脚本插件来配合了,可以百度一下 瀑布流 插件。
如果这个页面以后无论如何都保持原样,那么可以用2 方法,做起来轻松容易准确。
1、瀑布流,竖向自动排列,可以实现这样的效果。先分为4栏横向排列,在每栏里建立元素,这样就能够竖向自动排列
2、绝对定位,将每个元素的位置设置好,定死
3、li的形式按照你的代码写,完全自适应有难度,因为浏览器布局的原理就是先横向对齐,先形成一行,才铺满元素,所以每个元素在发生变化、或者以后发生变化,定位依然会出问题。
建议用1方法,可能会好一些,但代码的循环输出可能会出问题,这个就需要一些js脚本插件来配合了,可以百度一下 瀑布流 插件。
如果这个页面以后无论如何都保持原样,那么可以用2 方法,做起来轻松容易准确。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询