html - 急求，能否用flex或者高端點(diǎn)的CSS來(lái)布局這個(gè)圖呢？不想用浮動(dòng)或定位了
問(wèn)題描述
就是一個(gè)正方形里面，有五個(gè)大小相同的小圓圈，一個(gè)大圓圈，這樣排版。自己用flex寫(xiě)了好久也沒(méi)寫(xiě)出來(lái)，但是不想用浮動(dòng)或者定位，有木有什么高端一點(diǎn)的CSS高端寫(xiě)法呢
問(wèn)題解答
回答1：<!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>
差不多是這個(gè)樣子
這種布局用flex很簡(jiǎn)單的吧…………
https://jsfiddle.net/oyx4gh7c/
回答3：算了，先用float頂上吧，之后有更改好的再改吧
回答4：不用浮動(dòng)也可以，就用p來(lái)拼！
回答5：Grid布局
回答6：如果你是練習(xí)或者學(xué)習(xí)的話用flex布局沒(méi)問(wèn)題，但是如果是項(xiàng)目的話建議你還是float布局，因?yàn)镕lex的兼容性真的好差，
網(wǎng)公網(wǎng)安備