QQ 1640076782

2013年04月28日

CSS布局 如何让li自适应高度向左浮动

Filed under: 未分类 — 标签: — lifengwu @ 2:28 上午

      最近在做HTML页面的时候,产品列表页面的单个产品因为名称长短不一,高度不能固定,要自适应高度,便如此一来,就会出来错位情况,整个页面就全乱了,当然这个问题对于现在多数浏览器来说已经不是问题,但是还是有部分版本的浏览器不兼容,所以还是得解决!

       试了很多种方法,最后抱着试试的心态,用了clear:both属性,解决了这个问题,这样做问题虽然解决了,但是同时也给程序员带来了一点儿小麻烦,在写程序的时候需要做一下判断,比如一排显示四个产品的话,在输出4个产品、8个产品、16个产品的时候……需要输出“<div style=’clear:both’></div>”

1、样式如下:
<style>
.prolist{ width:760px; border:1px solid #ccc; }
.prolist ul {overflow:hidden;}
.prolist ul li{ float:left;}
.prolist li div{ width:188px; border:1px solid #ddd;}
.clear:both;
</style>

<div class="prolist"><ul>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
<div class="clear"></div>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
</ul>
</div>

更好的方法还在摸索中……