gpt4 book ai didi

html - 屏幕宽度拉伸(stretch)时自动增加边距

转载 作者:太空狗 更新时间:2023-10-29 13:31:40 26 4
gpt4 key购买 nike

我有一个列表 ( <ul /> ),我尝试将其显示为网格。 单元格具有固定宽度(假设为 100 像素):列数和行数取决于屏幕分辨率。

当屏幕宽度较大时,列多行少:

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

当屏幕宽度较小时,列少行多:

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

这实际上几乎 工作:看这个fiddle .

几乎,因为正如您所注意到的,当您拉伸(stretch)宽度时,网格右侧可能会出现一个空白区域。这是因为 float: left CSS属性,很好理解。

但是,有什么方法可以分配单元格之间的空白空间,即自动增加单元格之间的边距,直到有足够的空间容纳一个新的单元格吗?

换句话说,目前有一个 15 像素的固定边距,我正在寻找一种 15 像素的最小边距,在拉伸(stretch)宽度,并在新的 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 cell 也必须左对齐,即 align-center CSS 属性不适合我的需要(据我所知)。

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

最佳答案

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

关于html - 屏幕宽度拉伸(stretch)时自动增加边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20195641/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com