<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> float test 2 Demo </title>
<style>
.container{
width:500px;
height:auto;
background:yellow;
/*firefox chrome*/
display:table;
}
.li{
width:240px;
background:red;
float:left;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
display:table;
}
.icon , .content{
float:left;
}
.icon{
background:grey;
width:20px;
height:5px;
background-color:blue;
}
.content{
background:yellow;
width:100px;
padding-left:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="li"><div class="icon"></div><div class="content">test</div></div>
<div class="li"><div class="icon"></div><div class="content">test</div></div>
<div class="li"><div class="icon"></div><div class="content">test</div></div>
<div class="li"><div class="icon"></div><div class="content">test</div></div>
<div class="li"><div class="icon"></div><div class="content">test</div></div>
<div class="li"><div class="icon"></div><div class="content">test</div></div>
<div class="li"><div class="icon"></div><div class="content">test</div></div>
</div>
</body>
</html>
CSS div 定义的list，这里是两列，也可以改变size扩展成多列，可以在li里加任意的
的div并调整即可以做出各种复杂类型的list。不过有时候不推荐使用这么多的div来实现
这些功能
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
