84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
就是这种,不过其中的红色元素是根据父元素自适应的,每一行的第一个和最后一个元素紧贴父元素,这种应该怎么写,我现在用的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