Question

我需要创建一个宽度固定的“容器”（溢出：隐藏）。并且在这个容器中，我需要并排放置一个未知数目的子级-每个父级的宽度都一样，以便我可以水平（使用JS）逐个滚动它们。

对于主要是现代的浏览器（不幸的是也包括IE 11），是否可以通过某种新颖的CSS（最好根本不幻想）的方式来实现？

Answer 1

一种方法是使container具有固定的宽度，并在其中创建另一个容器，我将其称为parent。

这允许它以固定宽度延伸到容器外部。然后，如果将容器x溢出设置为滚动，则可以进行父级的水平滚动。

接下来，您可以将子元素添加到父容器，并为每个子元素提供固定的宽度。

最后，使用javaScript计算父容器的正确with。可以在下面看到工作示例。

let childEls = document.getElementsByClassName("child");

childSpace = 0;
for (let i = 0, len = childEls.length; i < len; i++) {
	childStyles = getComputedStyle(childEls[i]);
	childSpace += Number(childStyles.marginLeft.substr(0, childStyles.marginLeft.length-2));
  childSpace += Number(childStyles.marginRight.substr(0, childStyles.marginRight.length-2));
  childSpace += Number(childStyles.width.substr(0, childStyles.width.length-2));
}

let parent = document.getElementById("parent");
parent.style.width = childSpace + "px";

.wrapper {
  width: 500px;
  height: 100px;
  background: orange;
  overflow-x: scroll;
  overflow-y: hidden;
}

#parent {
  top: 0;
  left: 0;
  height: 100%;
  background: lightblue;
  display: flex;
  flex-direction: row;
  width: 1500px;
}

.child {
  width: 200px;
  height: 100px;
  background: green;
  margin-left: 10px;
  display: block;
}

<div class="wrapper">
  <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>
</div>

固定宽度的父级，并排不明数量的子级，每个子级的父级宽度

1 个答案: