需求
有1~3个item显示在同一行，但item的个数不一定，有一个，则这一个宽占100%，有两个，每个宽占50%，有三个，每个也平分。
技巧
借助nth-last-child和box-sizing
给各个item留中间的空隙的方法有padding和margin
代码实现
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>作业</title>
<link rel='stylesheet' href=''>
<style type="text/css">
body,ul{
padding:0 0;
margin:0 0;
}
.clearfix::after{
display:block;
content:"";
clear:both;
}
.part1 li{
float:left;
box-sizing:border-box;
list-style:none;
width:100%;
background: #888;
padding:0 30px;
border:2px solid red;
}
.part1 li:nth-last-child(2),
.part1 li:nth-last-child(2) ~ li{
width:50%;
}
.part1 li:nth-last-child(3),
.part1 li:nth-last-child(3) ~ li{
width:33%;
}
.part2 li{
float:left;
box-sizing:border-box;
width:100%;
list-style:none;
border:2px solid red;
}
.part2 li:nth-last-child(2),
.part2 li:nth-last-child(2) ~ li{
width:46%;
margin:0 2%;
}
.part2 li:nth-last-child(3),
.part2 li:nth-last-child(3) ~ li{
width:27%;
margin:0 3%;
}
</style>
</head>
<body>
<ul class="clearfix part1">
<li>狮子座的恋爱就是粘着你，当她觉得你是可以走进她内心的人，那么你就要做好准备接受一个你完全不认识狮子座，从豪迈变成小女人，这是态度差，觉得可以让你吃惊。如果你是狮子女的男朋友恭喜你，你的女朋友是一个集霸气和女人于一体的女人。</li>
<li>狮子座的恋爱就是粘着你，当她觉得你是可以走进她内心的人，那么你就要做好准备接受一个你完全不认识狮子座，从豪迈变成小女人，这是态度差，觉得可以让你吃惊。如果你是狮子女的男朋友恭喜你，你的女朋友是一个集霸气和女人于一体的女人。</li>
<li>狮子座的恋爱就是粘着你，当她觉得你是可以走进她内心的人，那么你就要做好准备接受一个你完全不认识狮子座，从豪迈变成小女人，这是态度差，觉得可以让你吃惊。如果你是狮子女的男朋友恭喜你，你的女朋友是一个集霸气和女人于一体的女人。</li>
</ul>
<ul class="clearfix part2" style="margin-top:20px;">
<li>狮子座的恋爱就是粘着你，当她觉得你是可以走进她内心的人，那么你就要做好准备接受一个你完全不认识狮子座，从豪迈变成小女人，这是态度差，觉得可以让你吃惊。如果你是狮子女的男朋友恭喜你，你的女朋友是一个集霸气和女人于一体的女人。</li>
<li>狮子座的恋爱就是粘着你，当她觉得你是可以走进她内心的人，那么你就要做好准备接受一个你完全不认识狮子座，从豪迈变成小女人，这是态度差，觉得可以让你吃惊。如果你是狮子女的男朋友恭喜你，你的女朋友是一个集霸气和女人于一体的女人。</li>
<!-- <li>狮子座的恋爱就是粘着你，当她觉得你是可以走进她内心的人，那么你就要做好准备接受一个你完全不认识狮子座，从豪迈变成小女人，这是态度差，觉得可以让你吃惊。如果你是狮子女的男朋友恭喜你，你的女朋友是一个集霸气和女人于一体的女人。</li> -->
</ul>
</body>
</html>
结果截图
一个.png
两个.png
三个.png
网友评论