为什么使用百分比宽度和像素宽度会产生不同的结果？

Question

我在我的布局的第二列中有一个水平滚动的div。由于某种原因，这个div的内容拉伸了我的页面并破坏了我的布局。我已经确定main__listing是罪魁祸首。div。为了测试这是否是有问题的div，我将宽度更改为10％。它将

的内容缩小到您预期的荒谬大小，但我的页面仍然无法正常工作。我使用Firefox开发人员工具查找像素宽度（290px）。然后我将宽度设置为290px。这样修复了我的页面。我希望

是流体的，所以这不是真正的解决方法，但我想知道为什么会出现这种情况。

简而言之，以百分比设置宽度的

与以相同大小的像素设置宽度的

具有不同的宽度。

CSS：

.main__listings {
  width: 100%;
}
.horizontal_scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.card {
  flex: 0 0 200px;
  margin: auto 10px;
}

HTML:

<div className="main__listings">
  <h1>Local Competitions</h1>
  <div className="horizontal_scroll">
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
    <div className="card">
      <h2>Competition Name</h2>
      <img src="http://via.placeholder.com/280x280" alt="" width="140" height="140"/>
    </div>
  </div>
</div>

- kalm42

---

根据您在标题中的问题，百分比是（总屏幕宽度“或高度”）。（所需百分比），因此例如想要图像占屏幕宽度的20％。在1820像素宽的屏幕/浏览器窗口上将为* 1820 * .20 = 364 **像素宽。如果您仅使用像素定义宽度，则无论屏幕大小如何，它始终是您选择的定义像素数量。如果您缩放屏幕，则会不断更改。 - GoofBall101

真实的情况是，无论哪种屏幕大小，都有对应的像素大小。我有一个div，我一开始用百分比设置它，然后再用像素设置它。当使用百分比时，div的大小没有改变，但使用像素时却改变了。在两种情况下，div的内容都发生了变化。 - kalm42

Answer 1

百分比会根据屏幕大小而改变，而像素不会根据屏幕而改变，也不会对不同的屏幕大小作出反应。如果你想在不使用百分比的情况下给出一些值，可以使用“rem”单位。这更具有响应性。查看如何与像素相比，“rem”单位是如何工作的。

参考网站：https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ 编辑： 参考评论所示：

- Lakindu Gunasekara

---

我想知道为什么一个宽度为百分比的 div 不会改变大小，只有在以像素设置宽度时才会改变 div 的大小和内容。我不确定如何简洁明了地问出这样一个微妙的问题。 - kalm42

请查看附在答案中的图片，以确定我们是否在同一页面上。有两张不同的图片，一张是像素，另一张是百分比。您还可以参考下面的链接 https://dev59.com/P1DTa4cB1Zd3GeqPHTh2 - Lakindu Gunasekara