Question

我有一个列表（<ul />），我尝试将其显示为网格。 单元格具有固定的宽度（比如说100px）：cols和rows的数量取决于屏幕分辨率。

当屏幕宽度较大时，有很多列但很少有几行：

   ______________________________________________________________
  |   ___________    ___________    ___________    ___________   |
  |  |           |  |           |  |           |  |           |  |
  |  |    #1     |  |    #2     |  |    #3     |  |    #4     |  |
  |  |<- 100px ->|  |<- 100px ->|  |<- 100px ->|  |<- 100px ->|  |
  |  |           |  |           |  |           |  |           |  |
  |  |___________|  |___________|  |___________|  |___________|  |
  |   ___________                                                |
  |  |           |                                               |
  |  |    #5     |                                               |
  |  |<- 100px ->|                                               |
  |  |           |                                               |
  |  |___________|                                               |
  |______________________________________________________________|

当屏幕宽度较小时，列数很少但行数很多：

               ________________________________
              |   ___________    ___________   |
              |  |           |  |           |  |
              |  |    #1     |  |    #2     |  |
              |  |<- 100px ->|  |<- 100px ->|  |
              |  |           |  |           |  |
              |  |___________|  |___________|  |
              |   ___________    ___________   |
              |  |           |  |           |  |
              |  |    #3     |  |    #4     |  |
              |  |<- 100px ->|  |<- 100px ->|  |
              |  |           |  |           |  |
              |  |___________|  |___________|  |
              |   ___________                  |
              |  |           |                 |
              |  |    #5     |                 |
              |  |<- 100px ->|                 |
              |  |           |                 |
              |  |___________|                 |
              |________________________________|

这实际上几乎正在工作：请参阅此fiddle。

几乎，因为您可以注意到，当您拉伸宽度时，网格右侧可能会出现一个空格。这是因为float: left CSS属性，这是可以理解的。

但是，有没有办法在单元格之间分配这个空白区域，即自动增加单元格之间的边距，直到那里是否有足够的空间来容纳新的单元？

换句话说，目前有15px的固定余量，我正在寻找一种15px的 min-margin ，当伸展时，它会自动增长宽度，一旦新的单元格符合第一行，就会回到15px。

为了说明而不是：

 ___________________________________________________________________
|   ___________    ___________    ___________    ___________        |
|  |           |  |           |  |           |  |           |       |
|  |    #1     |  |    #2     |  |    #3     |  |    #4     | BLANK |
|  |<- 100px ->|  |<- 100px ->|  |<- 100px ->|  |<- 100px ->| SPACE |
|  |           |  |           |  |           |  |           |       |
|  |___________|  |___________|  |___________|  |___________|       |
|   ___________                                                     |
|  |           |                                                    |
|  |    #5     |                                                    |
|  |<- 100px ->|                                                    |
|  |           |                                                    |
|  |___________|                                                    |
|___________________________________________________________________|

有类似的东西：

 ___________________________________________________________________
|    ___________     ___________     ___________     ___________    |
|   |           |   |           |   |           |   |           |   |
|   |    #1     |   |    #2     |   |    #3     |   |    #4     |   |
|   |<- 100px ->|   |<- 100px ->|   |<- 100px ->|   |<- 100px ->|   |
|   |           |   |           |   |           |   |           |   |
|   |___________|   |___________|   |___________|   |___________|   |
|    ___________                                                    |
|   |           |                                                   |
|   |    #5     |                                                   |
|   |<- 100px ->|                                                   |
|   |           |                                                   |
|   |___________|                                                   |
|___________________________________________________________________|

请参阅第二个插图中的边距较大，因此不再有空格。

有没有解决方案？

请注意，#5 单元格也必须左对齐，即align-center CSS属性不符合我的需求（就我而言）知道）。

此外，我将使用jQuery 1.10和Bootstrap 3，因此欢迎使用这些库中的一个（或多个）的任何解决方案;）

Answer 1

我创建了一个jQuery脚本来修复你的问题。见fiddle。我编写了脚本，你根本不需要改变它。您只需将最小边距设置为CSS中的边距，并添加所需的<li>个元素。

function setMargin() {
  ulWidth = $('ul').innerWidth();
  boxWidth = $('li').outerWidth();
  boxMargin = parseInt($('li').css('margin'));
  maxBoxNum = $("ul li").length;
  boxNum = Math.floor((ulWidth / (boxWidth + boxMargin)));
  totalMargin = ulWidth - (boxNum * boxWidth);
  eachMargin = totalMargin / (boxNum + 1);
  if (eachMargin < boxMargin) {
    boxNum -= 1;
    totalMargin = ulWidth - (boxNum * boxWidth);
    eachMargin = totalMargin / (boxNum + 1);
  }
  if (boxNum > maxBoxNum) {
    boxNum = maxBoxNum;
    totalMargin = ulWidth - (boxNum * boxWidth);
    eachMargin = totalMargin / (boxNum + 1);
  }
  $('li').css('margin-left', eachMargin);
}

$(document).ready(function() {
  setMargin();
});

$(window).resize(function() {
  setMargin();
});

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  width: 100px;
  height: 100px;
  margin: 15px 0;
  padding: 0;
  border: solid 1px black;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>#1</li>
  <li>#2</li>
  <li>#3</li>
  <li>#4</li>
  <li>#5</li>
</ul>

Answer 2

如果您可以使用百分比宽度并知道网格单元格超过3 - 最好的方法是使用this fiddle等媒体查询。您将按单元格大小增加填充空边距。

Answer 3

您只需使用CSS即可实现目标。我在谈论媒体查询。这是我制作的 DEMO 。它表明你可以使用计算来定位你的方块之间相等的边距。元素和窗口之间的边距也是相同的。

虽然我没有为751px以上的屏幕编写代码，但你明白了。这是代码：

html,
body {
  margin: 0;
  padding: 0;
  min-width: 150px;
}

.wrap {
  float: left;
  position: relative;
}

.foto {
  width: 150px;
  height: 150px;
  background: gold;
  position: absolute;
}

#warning {
  display: none;
}

@media screen and (min-width: 631px) {
  .wrap {
    width: 20%;
    padding-bottom: 25%;
  }
  .wrap:nth-child(4n+2),
  .wrap:nth-child(4n+3) {}
  .wrap .foto {
    top: -75px;
    margin-top: 100%;
    right: -30px;
  }
  .wrap:nth-child(4n+2) {
    margin: 0 5% 0 7.5%;
  }
  .wrap:nth-child(4n+3) {
    margin-right: 7.5%;
  }
  .wrap:nth-child(4n+2) .foto {
    left: 50%;
    margin-left: -75px;
  }
  .wrap:nth-child(4n+3) .foto {
    right: 50%;
    margin-right: -75px;
  }
  .wrap:nth-child(4n) .foto {
    left: -30px;
  }
  #container {
    margin-top: -45px;
  }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
  .wrap {
    width: 25%;
    padding-bottom: 33.3%;
  }
  .wrap:nth-child(3n+2) {
    margin: 0 12.5%;
  }
  .wrap .foto {
    top: -75px;
    margin-top: 100%;
    right: -37px;
  }
  .wrap:nth-child(3n+2) .foto {
    left: 50%;
    margin-left: -75px;
  }
  .wrap:nth-child(3n) .foto {
    left: -37px;
  }
  #container {
    margin-top: -37px;
  }
}

@media screen and (min-width: 331px) and (max-width: 480px) {
  .wrap {
    width: 33.3%;
    padding-bottom: 50%;
    clear: left;
  }
  .wrap:nth-child(even) {
    float: right;
    clear: right;
  }
  .wrap .foto {
    top: -75px;
    margin-top: 100%;
    right: -50px;
  }
  .wrap:nth-child(even) .foto {
    left: -50px;
  }
  .wrap:nth-child(4n+3) .foto,
  .wrap:nth-child(4n+4) .foto {
    bottom: -75px;
    margin-bottom: 100%;
  }
  #container {
    margin-top: -25px;
  }
}

@media screen and (max-width: 330px) {
  .wrap {
    width: 50%;
    padding-bottom: 100%;
    clear: left;
  }
  .wrap:nth-child(odd) .foto {
    right: -75px;
    bottom: 0;
    bottom: -75px;
    margin-bottom: 100%;
  }
  .wrap:nth-child(even) .foto {
    top: 0px;
    right: -75px;
    top: -75px;
    margin-top: 100%;
  }
}

@media screen and (min-width: 751px) {
  #warning {
    color: #fff;
    display: block;
    position: fixed;
    width: 100%;
    height: 50%;
    top: 25%;
    left: 0;
    background: #000;
    text-align: center;
    font-size: 30px;
  }

<div id="container">
  <div class="wrap">
    <div class="foto">1</div>
  </div>
  <div class="wrap">
    <div class="foto">2</div>
  </div>
  <div class="wrap">
    <div class="foto">3</div>
  </div>
  <div class="wrap">
    <div class="foto">4</div>
  </div>
  <div class="wrap">
    <div class="foto">5</div>
  </div>
  <div class="wrap">
    <div class="foto">6</div>
  </div>
  <div class="wrap">
    <div class="foto">7</div>
  </div>
  <div class="wrap">
    <div class="foto">8</div>
  </div>
  <div class="wrap">
    <div class="foto">9</div>
  </div>
  <div class="wrap">
    <div class="foto">10</div>
  </div>
  <div class="wrap">
    <div class="foto">11</div>
  </div>
  <div class="wrap">
    <div class="foto">12</div>
  </div>
  <div class="wrap">
    <div class="foto">13</div>
  </div>
  <div class="wrap">
    <div class="foto">14</div>
  </div>
  <div class="wrap">
    <div class="foto">15</div>
  </div>
</div>

<!-- FOLLOWING JUST FOR THE DEMO -->

<div id="warning">I haven't written the code for windows bigger than 751px.<br/> You must resize this window under 751px.</div>

屏幕宽度拉伸时自动增加边距

3 个答案: