6個(gè)并行的div 每個(gè)固定長(zhǎng)寬60px 怎么展示成一排三個(gè)的那種 每?jī)蓚€(gè)的間距和邊距都是相同且自適應(yīng)的|-div-div-div-||-div-div-div-|如何實(shí)現(xiàn)
2 回答
鳳凰求蠱
TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超4個(gè)贊
demo 附上鏈接
calc(25% - 45px) 是calc((100% - (3*60)px)/4) 得出來的
不過一般我如果確定是兩行6個(gè)的話，不會(huì)為了節(jié)約一行，而取巧的，乖乖寫兩個(gè)row，每個(gè)row下面3個(gè)元素，用個(gè) 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>
慕田峪4524236
TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超5個(gè)贊
先獲取瀏覽器窗口寬度。然后用獲取到的值減去三個(gè)div寬度180，再用得到的值/4，就是每個(gè)div相隔的距離值了
添加回答
舉報(bào)
0/150
提交
取消