屏幕宽度拉长时自动增加边距 [英] Auto-growing margins when screen width get stretched
问题描述
我有一个尝试显示为网格的列表(<ul />). 单元格的宽度固定(例如100px):列数和行数取决于屏幕分辨率.
I have a list (<ul />) that I try to display as a grid. The cells have a fixed width (let's say 100px): the number of cols and rows depends then on the screen resolution.
当屏幕的宽度较大时，会有很多列但只有几行:
When the screen has a large width, there are many columns but few lines:
______________________________________________________________
| ___________ ___________ ___________ ___________ |
| | | | | | | | | |
| | #1 | | #2 | | #3 | | #4 | |
| |<- 100px ->| |<- 100px ->| |<- 100px ->| |<- 100px ->| |
| | | | | | | | | |
| |___________| |___________| |___________| |___________| |
| ___________ |
| | | |
| | #5 | |
| |<- 100px ->| |
| | | |
| |___________| |
|______________________________________________________________|
当屏幕的宽度较小时，列数很少，但行数却很多:
When the screen has a small width, there are few columns but many lines:
________________________________
| ___________ ___________ |
| | | | | |
| | #1 | | #2 | |
| |<- 100px ->| |<- 100px ->| |
| | | | | |
| |___________| |___________| |
| ___________ ___________ |
| | | | | |
| | #3 | | #4 | |
| |<- 100px ->| |<- 100px ->| |
| | | | | |
| |___________| |___________| |
| ___________ |
| | | |
| | #5 | |
| |<- 100px ->| |
| | | |
| |___________| |
|________________________________|
这实际上几乎是 起作用:请参见此小提琴.
This is actually almost working: see this fiddle.
几乎，因为您会注意到，拉伸宽度时，网格的右侧可能会出现空白.这是因为float: left CSS属性，并且完全可以理解.
Almost, because as you can notice, when you're stretching the width, a blank space may appear on the right of the grid. This is because of the float: left CSS property, and is quite understandable.
但是，有什么方法可以分配 单元格之间的空白，即自动增加单元格之间的边距，直到出现有足够的空间容纳一个新的 cell ?
But, is there any way to distribute this blank space between the cells, i.e. automatically increase the margins between the cells, until there is enough space to fit a new cell?
换句话说，当前有15px的固定边距，而我正在寻找一种15px的最小边距，它会在拉伸宽度，并在新的 cell 插入第一行后返回15px.
In other words, there is currently a fixed margin of 15px, and I'm looking for a kind of min-margin of 15px, that auto-grows while stretching the width, and goes back to 15px once a new cell fitted the first row.
为了说明，而不是:
___________________________________________________________________
| ___________ ___________ ___________ ___________ |
| | | | | | | | | |
| | #1 | | #2 | | #3 | | #4 | BLANK |
| |<- 100px ->| |<- 100px ->| |<- 100px ->| |<- 100px ->| SPACE |
| | | | | | | | | |
| |___________| |___________| |___________| |___________| |
| ___________ |
| | | |
| | #5 | |
| |<- 100px ->| |
| | | |
| |___________| |
|___________________________________________________________________|
具有类似的内容:
___________________________________________________________________
| ___________ ___________ ___________ ___________ |
| | | | | | | | | |
| | #1 | | #2 | | #3 | | #4 | |
| |<- 100px ->| |<- 100px ->| |<- 100px ->| |<- 100px ->| |
| | | | | | | | | |
| |___________| |___________| |___________| |___________| |
| ___________ |
| | | |
| | #5 | |
| |<- 100px ->| |
| | | |
| |___________| |
|___________________________________________________________________|
请参见，第二个图中的边距较大，因此不再有空白.
See, the margins are larger in the second illustration, so there is no blank space anymore.
有什么解决办法吗?
请注意，#5 单元格也必须左对齐，即，据我所知，align-center CSS属性不适合我的需求.
Please note that the #5 cell has to be left-aligned too, i.e. an align-center CSS property won't suit my needs (as far as I know).
此外，我将使用jQuery 1.10和Bootstrap 3，因此使用这些库中的一个(或多个)的任何解决方案都将受到欢迎；)
Moreover, I'll be using jQuery 1.10 and Bootstrap 3, so any solution using one (or more) of these libraries is also welcomed ;)
推荐答案
我创建了一个jQuery脚本来解决您的问题.参见此小提琴.我在不需要完全更改脚本的地方编写了脚本.您只需将最小边距设置为CSS中的边距，然后添加所需的<li>个元素即可.
I created a jQuery script that fixes your problem. See this fiddle. I wrote the script where you do not have to change it at all. You just set your minimum margin as the margin in the CSS and add as many <li> elements you want.
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>
这篇关于屏幕宽度拉长时自动增加边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
