为了账号安全,请及时绑定邮箱和手机立即绑定

求问一个比较高级的等分布局

求问一个比较高级的等分布局

繁星coding 2018-09-08 19:39:35
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>


查看完整回答
反对 回复 2018-09-09
?
慕田峪4524236

TA贡献1875条经验 获得超5个赞

先获取浏览器窗口宽度。然后用获取到的值减去三个div宽度180,再用得到的值/4,就是每个div相隔的距离值了

查看完整回答
反对 回复 2018-09-09
  • 2 回答
  • 0 关注
  • 631 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信