鍍金池/ 問答/HTML/ 求問一個比較高級的等分布局

求問一個比較高級的等分布局

6個并行的div 每個固定長寬60px 怎么展示成一排三個的那種 每兩個的間距和邊距都是相同且自適應(yīng)的
|-div-div-div-|
|-div-div-div-|
如何實現(xiàn)

回答
編輯回答
焚音

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>
2017年8月18日 14:54
編輯回答
薔薇花

先獲取瀏覽器窗口寬度。然后用獲取到的值減去三個div寬度180，再用得到的值/4，就是每個div相隔的距離值了

2017年7月9日 10:57