6個并行的div 每個固定長寬60px 怎么展示成一排三個的那種 每兩個的間距和邊距都是相同且自適應(yīng)的|-div-div-div-||-div-div-div-|如何實現(xiàn)
2 回答
鳳凰求蠱
TA貢獻1825條經(jīng)驗 獲得超4個贊
demo 附上鏈接
calc(25% - 45px) 是calc((100% - (3*60)px)/4) 得出來的
不過一般我如果確定是兩行6個的話，不會為了節(jié)約一行，而取巧的，乖乖寫兩個row，每個row下面3個元素，用個 justify-content: space-evenly;就得到你要的效果了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: auto; padding: 0; } .list{ display: flex; align-items: center; flex-wrap: wrap; } .list>div{ width: 60px; height: 60px; background: pink; margin-left: calc(25% - 45px); margin-bottom: 10px; } .list>div:nth-child(3n+3){ margin-right: calc(25% - 45px); } </style> </head> <body> <div class="list"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> </html>
添加回答
舉報
0/150
提交
取消