84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
就是一个正方形里面,有五个大小相同的小圆圈,一个大圆圈,这样排版。自己用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的兼容性真的好差,