6个并行的div 每个固定长宽60px 怎么展示成一排三个的那种 每两个的间距和边距都是相同且自适应的|-div-div-div-||-div-div-div-|如何实现
2 回答
凤凰求蛊
TA贡献1825条经验 获得超4个赞
demo 附上链接
calc(25% - 45px) 是calc((100% - (3*60)px)/4) 得出来的
不过一般我如果确定是两行6个的话，不会为了节约一行，而取巧的，乖乖写两个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>
- 2 回答
- 0 关注
- 616 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消