Question

填补，边距关闭，我不知道导致空间在下面盘旋的是什么。我使用标准化，这并不重要。我得到了垂直滚动条改变了一些东西，但是不应该100％宽度来修复它吗？

屏幕截图使用画布宽度，最大宽度为80％，右手可以通过浏览器调整大小。如果我设置为20％它会包裹在下面。

更新：对于那些懒得点击重复链接的人来说，这里有一个类似的片段：

＆＃13;

.model-div {
  background: black;
  display: inline-block;
  height: 100vh;
  max-width: 80%;
  width: 80%;
}

.ui-console {
  display: inline-block;
  height: 100vh;
  max-width: 20%;
  width: 20%;
}

＆＃13;

<body>
  <div class="model-div"></div>
  <div class="ui-console">
    <button class="reset" onclick="model.fReset()">Reset</button>
    <button class="blind-mode" onclick="model.fToggleBlind()">Toggle Blind Mode</button>
    <div class="log-text-div"></div>
  </div>
</body>

＆＃13;

Answer 1

浏览器将任意数量的空白检测为1个空格，因此它会在两个项目之间打印一个空格，从而导致第二个项目掉落。（除非您使用解决方法。）可能的解决方案：

1.在HTML中删除你的空白。最简单的方法是使用一些东西来缩小HTML，这无论如何都是一种很好的做法。

2.将父级的 font-size 设置为零

父级（在您的示例中为正文。）

.parent{
  font-size:0;
}

儿童

.parent>*{
  font-size:16px;
}

3.Flo the children（Bootstrap在v3中执行此操作，然后切换到flexbox。）

.model-div,.ui-console{
  float:left;
}

Chrome 100％宽度和100 Vw溢出

1 个答案: