Question

我正在尝试创建一行不包装的div，并且可以使用常规页面滚动条（水平和垂直）滚动。

以下解决方案的唯一问题是，如果我向右滚动，则不会显示该行的background-color（和右边填充）。

要求：

我不希望行中有滚动条，只想看（水平和垂直）页面滚动条
行的背景颜色将显示在行的末尾（与演示中的不同）
不要使用固定宽度，因为宽度取决于列数，并且它们将来可能会增长。

可以使用flexbox等。

.row {
  background-color: #CCC;
  padding: 30px;
  white-space: nowrap;
}

.row:nth-child(odd) {
  background-color: #AAA;
}

.column {
  display: inline-block;
  width: 50%;
  margin-right: 5%;
  white-space: normal;
  vertical-align: top;
}

.column:last-of-type {
  margin-right: 0;
}

.item {
  padding: 10px;
  background-color: #FFF;
  margin-bottom: 10px;
  border: 1px solid black;
}

.item:last-of-type {
  margin-bottom: 10px;
}

<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>

Answer 1

除@Michael_B's得到充分解释的答案外，另一种解决方案是在UTF 8上使用display: inline-block，row与block相反，与其内容一起增长。

由于您无法在row上设置宽度（将阻止其与内容一起增长），因此在设置宽度和边距时需要使用视口单位（或除百分比以外的任何其他单位） column，因此对于给定的标记，row设置为占据视口的整个宽度，这可能是一个可行的选项。

.row {
  background-color: #CCC;
  padding: 30px;
  white-space: nowrap;
  display: inline-block;
}
.row:nth-child(odd) {
  background-color: #AAA;
}
.column {
  display: inline-block;
  width: 50vw;
  white-space: normal;
  vertical-align: top;
  margin-right: 5vw;
}
.column:last-of-type {
  margin-right: 0;
}
.item {
  padding: 10px;
  background-color: #FFF;
  margin-bottom: 10px;
  border: 1px solid black;
}
.item:last-of-type {
  margin-bottom: 10px;
}

<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
  <div class="column">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>

Answer 2

默认情况下，块元素扩展到其父元素的100％宽度。

在你的布局中，这正是发生的事情。 background-color上的.row覆盖了其父级body的完整内容。任何溢出都不包括在内。

因此，不要将背景颜色放在每个.row元素上，而是将其放在body上。

将此添加到您的代码中：

body {
  background-color: #ccc;
  margin: 0;
}

折叠右边距填充似乎是由于元素“过度约束”造成的。发生这种情况时，将忽略右边距/填充。

您可以在此处详细了解：How can I stop the last margin collapsing in flexbox?

要解决布局中的问题，请尝试使用透明边框而不是填充。

将此添加到您的代码中：

.column:last-child {
  border-right: 30px solid transparent;
}

body {
  background-color: #ccc;
  margin: 0;
}

.row {
  display: flex;
  padding: 30px;
  white-space: nowrap;
}

.column {
  flex: 0 0 50%;
  white-space: normal;
}

.column + .column {
  margin-left: 30px;
}

.column:last-child {
  border-right: 30px solid transparent;
}

.item {
  padding: 10px;
  background-color: #FFF;
  margin-bottom: 10px;
  border: 1px solid black;

<div class="row">
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
  <div class="column">
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
</div>

背景颜色在视口边缘切断

2 个答案:

jsFiddle