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
就是一个正方形里面,有五个大小相同的小圆圈,一个大圆圈,这样排版。自己用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>
It looks almost like this
This kind of layout is very simple with flex...
flex
https://jsfiddle.net/oyx4gh7c/
Forget it, use float to top it first, and then change it if you have any changes
You don’t need to float, just use p to spell it!
Grid Layout
If you are practicing or studying, it is okay to use flex layout, but if it is a project, it is recommended that you stick to float layout, because the compatibility of Flex is really poor,
It looks almost like this
This kind of layout is very simple with
flex
...https://jsfiddle.net/oyx4gh7c/
Forget it, use float to top it first, and then change it if you have any changes
You don’t need to float, just use p to spell it!
Grid Layout
If you are practicing or studying, it is okay to use flex layout, but if it is a project, it is recommended that you stick to float layout, because the compatibility of Flex is really poor,