工作示例：

Question

使用这样的布局时：

＆＃13;

div {
  width: 25vw;
  height: 150vh;
  float: left;
  background: rgb(30,120,210)
}
div:nth-child(2n+2) {
  background: rgb(210,120,30)
}

＆＃13;

<div></div>
<div></div>
<div></div>
<div></div>

＆＃13;

Scrollbar破坏了设计。没有滚动条它工作得很好，每个元素占屏幕宽度的1/4。一个解决方案是将width: calc(25vw - 17px)添加到最后一个元素，但我的网格比这更复杂。所以我在考虑是否可以使滑块具有类似于position: fixed的规则，因此它超出了元素而不是压碎它们。或者甚至更好，如果可能的话，删除滚动条。此问题不会出现在Linux Firefox或Chrome上。

Answer 1

为什么不使用width: 25%代替width: 25vw？然后会考虑滚动条。

工作示例：

div {
  width: 25%;
  height: 150vh;
  float: left;
  background: rgb(30,120,210)
}
div:nth-child(2n+2) {
  background: rgb(210,120,30)
}

<div></div>
<div></div>
<div></div>
<div></div>

Answer 2

如果您使用flexbox，可以通过flex和min-width属性轻松解决：

body {
  display: flex;
  flex-flow: row wrap;
}

div {
  flex: 1;
  height: 150vh;
  background: #123;
  min-width: 25%;
  max-width: 25%;
}

div:nth-child(odd) {
  background: #222;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

因此，max-width可用于行中的任何新元素以遵循规则。

PS：对于跨浏览器测试，请不要忘记prefix flex属性。

使滚动条固定而不是破碎布局

2 个答案:

工作示例：