猿问

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

6个并行的div 每个固定长宽60px 怎么展示成一排三个的那种 每两个的间距和边距都是相同且自适应的
|-div-div-div-|
|-div-div-div-|
如何实现

繁星coding
浏览 632回答 2
2回答

凤凰求蛊

demo&nbsp;附上链接点击预览calc(25% - 45px) 是calc((100% - (3*60)px)/4) 得出来的不过一般我如果确定是两行6个的话，不会为了节约一行，而取巧的，乖乖写两个row，每个row下面3个元素，用个 justify-content: space-evenly;就得到你要的效果了<!DOCTYPE&nbsp;html>&nbsp;<html&nbsp;lang="en">&nbsp;<head>&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="UTF-8">&nbsp;&nbsp;&nbsp;<title>Document</title>&nbsp;&nbsp;&nbsp;<style&nbsp;type="text/css">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;auto;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.list{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-wrap:&nbsp;wrap;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.list>div{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;60px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;60px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;pink;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-left:&nbsp;calc(25%&nbsp;-&nbsp;45px);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:&nbsp;10px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.list>div:nth-child(3n+3){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right:&nbsp;calc(25%&nbsp;-&nbsp;45px);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;</style>&nbsp;</head>&nbsp;<body>&nbsp;&nbsp;&nbsp;<div&nbsp;class="list">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>1</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>2</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>3</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>4</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>5</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>6</div>&nbsp;&nbsp;&nbsp;</div>&nbsp;</body>&nbsp;</html>
0

慕田峪4524236

先获取浏览器窗口宽度。然后用获取到的值减去三个div宽度180，再用得到的值/4，就是每个div相隔的距离值了
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答