84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
就是这种,不过其中的红色元素是根据父元素自适应的,每一行的第一个和最后一个元素紧贴父元素,这种应该怎么写,我现在用的css3的flex属性写的,感觉会有兼容问题,大家有更好的方法吗
走同样的路,发现不同的人生
提供两个解决方案:
<!-- html --> <p class="adv"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </p>
/* css */ *{ margin:0; padding: 0; } .adv{ width: 920px; height:620px; background: green; } .adv ul li{ width: 300px; height: 200px; float: left; margin-right: 10px; margin-bottom: 10px; background: blue; list-style: none; } .adv ul li:nth-child(3n){ margin-right: 0; } .adv ul li:nth-child(n+7){ margin-bottom: 0; }
效果图如下:
<!-- html --> <p class="adv"> <ul> <li></li> <li></li> <li class="no-mr"></li> <li></li> <li></li> <li class="no-mr"></li> <li></li> <li></li> <li class="no-mr no-mb"></li> </ul> </p>
/* css */ *{ margin:0; padding: 0; } .adv{ width: 920px; height:620px; background: green; } .adv ul li{ width: 300px; height: 200px; float: left; margin-right: 10px; margin-bottom: 10px; background: blue; list-style: none; } .no-mr{ margin-right: 0 !important; } .no-mb{ margin-bottom: 0 !important; }
效果图同上.
望采纳,Thx!
inline-block 也行啊
常规方法是用float~
还有个方法是用inline-block
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html5</title> <style type="text/css"> .box{ width: 30%; display: inline-block; border:1px solid #440239; height: 50px; margin: 1%; } </style> </head> <body> <p class="box"></p> <p class="box"></p> <p class="box"></p> <p class="box"></p> <p class="box"></p> <p class="box"></p> <p class="box"></p> <p class="box"></p> <p class="box"></p> </body> </html>
提供两个解决方案:
效果图如下:
效果图同上.
望采纳,Thx!
inline-block 也行啊
常规方法是用float~
还有个方法是用inline-block