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

问题描述 投票：9回答：3

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

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

   ______________________________________________________________
  |   ___________    ___________    ___________    ___________   |
  |  |           |  |           |  |           |  |           |  |
  |  |    #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的最小边距，在拉伸宽度时自动增长，并且一旦新单元符合第一行，则返回到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，因此欢迎使用这些库中的一个（或多个）的任何解决方案;）

html css css-float margin grid-layout
3个回答
2
投票

我创建了一个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>
0
投票

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

0
投票

您只需使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.