当屏幕宽度被拉伸时自动增加边距答案

【问题标题】：Auto-growing margins when screen width get stretched当屏幕宽度被拉伸时自动增加边距
【发布时间】：2018-09-12 14:51:01
【问题描述】：

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

屏幕宽大时，列多行少：

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

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

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

这实际上几乎可以工作：请参阅fiddle。

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

但是，有没有办法在 cells 之间分配这个空白空间，即自动增加 cells 之间的边距，直到出现有足够的空间容纳一个新的单元格吗？

换句话说，目前有 15px 的固定边距，我正在寻找一种 15px 的 min-margin，它会在 拉伸宽度的同时自动增长，一旦新的 cell 适合第一行，就会回到 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，因此也欢迎使用其中一个（或多个）库的任何解决方案；）

【问题讨论】：

这就是你想要的：jsfiddle.net/j08691/ANyYL/4?
@j08691 text-align: justify;的用法非常有趣！
我认为 j08691 的解决方案与纯 CSS 一样接近。所以我认为你需要 javascript (/jQuery)。
使用 CSS 的方法非常好，问题是你不能保留第二行的结构。
@j08691 嗯，你有一个非常好的主意！但是当第一行有 3 个 cells 而第二行有 2 个时，第二行的布局就很混乱了，因为 #5 与 #2 不一致...

标签： html css css-float margin grid-layout

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

我很确定 OP 想要固定宽度的 div。

【解决方案3】：

您可以仅使用 CSS 来实现您的目标。我说的是媒体查询。这是我制作的DEMO。它表明您可以使用计算来定位您的正方形，使其彼此之间具有相等的边距。元素和窗口的边距也是一样的。

虽然我没有为超过 751 像素的屏幕编写代码，但你明白了。这是代码：

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>

【讨论】：