当屏幕宽度变宽时，自动增长边距 [英] Auto-growing margins when screen width get streched
问题描述
我有一个列表（< 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属性，这是很容易理解的。
以在单元格之间分配该空白空间，即自动增加单元格之间的边界，直到有足够的空间适合新的 > cell ？
换句话说，目前有一个15px的固定利润，我正在寻找一种最小利润，在拉伸宽度时自动生长，并且在新的单元格适合第一行后返回到15px。
为了说明，而不是：
___________________________________________________________________
| ___________ ___________ ___________ ___________ |
| | | | | | | | | |
| | ＃1 | | ＃2 | | ＃3 | | ＃4 | BLANK |
| |< - 100px - > | |< - 100px - > | |< - 100px - > | |< - 100px - > | SPACE |
| | | | | | | | | |
| | ___________ | | ___________ | | ___________ | | ___________ | |
| ___________ |
| | | |
| | ＃5 | |
| |< - 100px - > | |
| | | |
| | ___________ | |
| ___________________________________________________________________ |
有类似的东西：
___________________________________________________________________
| ___________ ___________ ___________ ___________ |
| | | | | | | | | |
| | ＃1 | | ＃2 | | ＃3 | | ＃4 | |
| |< - 100px - > | |< - 100px - > | |< - 100px - > | |< - 100px - > | |
| | | | | | | | | |
| | ___________ | | ___________ | | ___________ | | ___________ | |
| ___________ |
| | | |
| | ＃5 | |
| |< - 100px - > | |
| | | |
| | ___________ | |
| ___________________________________________________________________ |
看到，第二个图示中的边距较大，因此不再有空格。 p>
有没有解决方案？
请注意，＃5 必须左对齐，即 align-center CSS属性将不适合我的需要）。
此外，我将使用jQuery 1.10和Bootstrap 3，所以使用一个（或多个）这些库的任何解决方案都受欢迎;）
我创建了一个jQuery脚本来修复你的问题。请参阅小提琴。我写的脚本，你不必改变它。您只需将最低保证金设置为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（）;
}）;
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.
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.
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?
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.
To illustrate, instead of:
___________________________________________________________________
| ___________ ___________ ___________ ___________ |
| | | | | | | | | |
| | #1 | | #2 | | #3 | | #4 | BLANK |
| |<- 100px ->| |<- 100px ->| |<- 100px ->| |<- 100px ->| SPACE |
| | | | | | | | | |
| |___________| |___________| |___________| |___________| |
| ___________ |
| | | |
| | #5 | |
| |<- 100px ->| |
| | | |
| |___________| |
|___________________________________________________________________|
Having something like:
___________________________________________________________________
| ___________ ___________ ___________ ___________ |
| | | | | | | | | |
| | #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.
Is there any solution?
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).
Moreover, I'll be using jQuery 1.10 and Bootstrap 3, so any solution using one (or more) of these libraries is also welcomed ;)
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.
Here is the function:
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);
}
Then I call the function like this:
$(document).ready(function () {
setMargin();
});
$(window).resize(function () {
setMargin();
});
这篇关于当屏幕宽度变宽时，自动增长边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
