我怎样才能使列滚动到页面之外？答案

【问题标题】：How could I make columns scroll beyond the page?我怎样才能使列滚动到页面之外？
【发布时间】：2022-11-22 13:03:12
【问题描述】：

我找到了一种在 html 和 css 中创建列的方法，但是一旦它到达页面末尾，它就会生成一个新的集合，而不是直接滚动到页面之外。你知道我怎样才能让它成为一组连续的列吗？

这就是我想要做的。我希望它作为连续的列集从左到右显示在页面之外，但在第 4 列之后，它只是开始一组新的 4 列。

* {
  box-sizing: border-box;
}


/* Create four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px;
  /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

<h2>Four Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#aaa;">
    <h2>Column 5</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 6</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 7</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 8</h2>
    <p>Some text..</p>
  </div>
</div>

【问题讨论】：

查看CSS Grids。

标签： html css

【解决方案1】：

如果每一列的宽度都是25%，这意味着它占据了其父级宽度的四分之一。默认情况下，.row 是一个块级元素，在这种情况下，它在 body 内占据了整个屏幕的宽度。因此你的列是25%屏幕的宽度。

为了使您的行比屏幕更宽，我们可以将其设置为刚好足以容纳其所有子项。除了我们的孩子增加了 200% 的宽度，尽管有这个设置，我们还是会得到一个新行。要解决此问题，我们可以将列的宽度设置为 25vw 或视口宽度的 25%。

* {
  box-sizing: border-box;
}


.row {
  min-width: max-content;
}

/* Create four equal columns that floats next to each other */

.column {
  float: left;
  width: 25vw;
  padding: 10px;
  height: 300px;
  /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

<h2>Four Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#aaa;">
    <h2>Column 5</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 6</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 7</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 8</h2>
    <p>Some text..</p>
  </div>
</div>

【讨论】：