在保持垂直滚动的同时，列出DIVS伸展

Question

我有一个包含几个子div元素的div，我希望孩子元素的宽度伸展，以便所有子元素都填充了包含的div的宽度，父母div。我已经在网上进行了很多研究，但还没有找到我想要的东西。就我的情况而言，当父母的孩子垂直溢出时，父母div上有一个垂直滚动。我已经看到这是在变焦和Google见面的情况下完成的。尽管我在Zoom和Google Meets中看到的事情与垂直滚动无关。没有垂直滚动。我尝试使用jQuery/javaScript执行此操作，但找不到为什么我的代码不起作用。孩子divs宽度不会伸展，因此所有孩子都将宽度分配或覆盖父级的宽度。

$(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解决方案。先感谢您。

Answer 1

我建议将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/andyg2/pen/pen/pen/wvmgeyb

Answer 2

CSS网格可以在这里提供帮助，并有任何对JS的需求。

在此片段中，您的原始代码有一些变化：

儿童div已使用＆lt;/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>

Answer 3

您可以通过将显示：表给出父元素，而 display：table-cell 来实现这一目标。

html代码

<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
}

您可以在此处找到我的Codepen演示 - https：>

您可以参考表显示 -

1. 如何（以及为什么）使用display：table-cell（css）<< /a>

   
   

2. 
   

3. https://develiper.mozilla.orgg/en-us/docs/ Web/css/table-layout