使div列表在保持垂直滚动的同时拉伸到适合父元素宽度

我有一个包含几个子div元素的div，我希望子元素的宽度拉伸，以便所有子元素填充包含div的宽度，父div。我在网上做了很多研究，但没有找到我要找的东西。在我的例子中，当子div垂直溢出父div时，父div上有一个垂直滚动。我在Zoom和Google Meets上看到过这种做法。尽管我在Zoom和Google Meets中看到的情况与垂直滚动无关。没有垂直滚动。我试着用jquery/javascript这样做，但无法找出为什么我的代码不工作。子div的宽度不会拉伸到所有子div一起适合或覆盖父div的宽度。

$(document).on("ready", function() {
var child = $(".child").length;
var childWidth = $(".child").width() + 10; /* child width plus 10 for margin right */
var parentWidth = $("#parent").width();
for (var i = 1; i <= child; i++) {
childWidth = childWidth + 210;
/*increment child divs width. divs in first   row */
var remainingSpace = parentWidth - childWidth; /* remaining space in first row of child divs */
if (remainingSpace < 210) { /* can't fit another 200px plus 10px margin-right div in first row */
var scalar = remainingSpace / i;
/*divide remaining space by number of divs in the first row */
var newChildWidth = 200 + scalar; /* add  scalar to width of all child divs */
$(".child").css("width", newChildWidth + "px"); /* apply new width to all child divs */
return false;
/* stop for iteration because childWidth calculation for  first row is complete */
}
}
});

#parent {
width: 100%;
/*100% of window width. Which is variable from device to device*/
height: 100%; /* parent height is 100% of window viewport height */
overflow: auto;
text-align: center;
}
.child {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 10px;
margin-bottom: 10px;
}

<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

如果有纯CSS解决方案，我也会接受。提前谢谢你。

我建议使用CSS网格进行这种排列。

#parent {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.child{
background: blue;
height:50px;
&:nth-child(even){
background:red;
}
}

下面是一个例子:https://codepen.io/andyg2/pen/wvmGEyB

CSS grid可以在这里提供帮助，而不需要任何JS。

在这段代码中，与原始代码相比有一些变化:

子div已经用</div>关闭-否则它们看起来嵌套并且grid只看到第一个div，它是一个直接的子div。

在定义网格时，右边和底部的边距已被使用间隙代替。

子元素的宽度被设置为最小为200px和1fr(这是告诉网格展开一行中所有项目之间的剩余空间)。

每个项目的宽度为100%，长宽比为1/1，因此它保持正方形。

父元素的最大高度为900px，这样在更宽的视图中，行间距保持在10px(否则它们会均匀地分布高度和宽度，垂直间距很大)。

#parent {
width: 100%;
/*100% of window width. Which is variable from device to device*/
max-height: 900px;
overflow: auto;
display: grid;
grid-gap: 10px;
/* instead of the margins of 10px on the children */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.child {
width: 100%;
aspect-ratio: 1 / 1;
/* to make sure they stay square */
background: cornflowerblue;
}

<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

您可以通过将display: table赋给父元素并将display: table-cell赋给每个子元素来实现这一点。

<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

CSS

#parent{
width: 100%;  /*100% of window width. Which is variable from device to device*/
height: 900px;
overflow: auto;
border: 1px solid magenta;
display: table;
}
.child{
width: 200px;
height: 200px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid magenta;
display: table-cell
}

你可以在这里找到我的codependency演示- https://codepen.io/sachinsom93/pen/GRxZXbR

一些链接可以参考表显示-

如何(以及为什么)使用display: table-cell (CSS)

相关内容

最新更新

热门标签：