84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
就是一个正方形里面,有五个大小相同的小圆圈,一个大圆圈,这样排版。自己用flex写了好久也没写出来,但是不想用浮动或者定位,有木有什么高端一点的CSS高端写法呢
光阴似箭催人老,日月如移越少年。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #wrap{width: 600px; padding:5px; border: 1px solid #666;} .flex{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-flex; display: flex; justify-content: space-around; } .circle{ border-radius: 50%; border: 1px solid #000; margin: 20px; } .box1-item1{ width: 300px; height: 300px; } .box1-item2{ flex-direction: column; } .box1-item2-one{ width: 150px; height: 150px; margin: 6px 0 0 0; } .box2-item{ width: 150px; height: 150px; } </style> </head> <body> <p id="wrap"> <p class="box1 flex"> <p class="box1-item1 circle"></p> <p class="box1-item2 flex"> <p class="box1-item2-one circle"></p> <p class="box1-item2-one circle"></p> </p> </p> <p class="box2 flex"> <p class="box2-item circle"></p> <p class="box2-item circle"></p> <p class="box2-item circle"></p> </p> </p> </body> </html>
差不多是这个样子
这种布局用flex很简单的吧…………
flex
https://jsfiddle.net/oyx4gh7c/
算了,先用float顶上吧,之后有更改好的再改吧
不用浮动也可以,就用p来拼!
Grid布局
如果你是练习或者学习的话用flex布局没问题,但是如果是项目的话建议你还是float布局,因为Flex的兼容性真的好差,
差不多是这个样子
这种布局用
flex
很简单的吧…………https://jsfiddle.net/oyx4gh7c/
算了,先用float顶上吧,之后有更改好的再改吧
不用浮动也可以,就用p来拼!
Grid布局
如果你是练习或者学习的话用flex布局没问题,但是如果是项目的话建议你还是float布局,因为Flex的兼容性真的好差,