如何调整div元素，以使网站在不同屏幕尺寸的设备上看起来相同？

Question

我有一个网站，我会在其中定期将框（称为post-it的div元素）添加到宽度为100％的较大div元素（称为section）中。 section元素是除网站标题之外的整个网站。我对盒子使用了绝对定位，并根据顶部和左侧像素设置了它们在网站上的位置。

.section{
    width: 100%;
    height: 1000px;
    margin: 0 auto;
    background-repeat: repeat-y;
    background-size:contain;
    background-color: #8B8B8B;
}

.post-it{
    height: 100px;
    width: 100px;
    font-family: 'Monte', sans-serif;
    font-size: 25;
    padding-top: 56.25%;

}

<header>
    <p>Sample header of webpage</p>
</header>
<div class="section">
    <div class = "post-it" style = "position: absolute; top: 640px; left: 20px;">
    .
    .
    .
    <div class = "post-it" style = "position: absolute; top: 1450px; left: 870px;">
    .
    (arbitrary amount of post-its added at different times)
</div>
<footer>
    <p>Sample footer of webpage</p>
</footer>

[当我在笔记本电脑上时，可以在较大的div元素的最右侧添加一个框，并且网站显示不会受到干扰。但是，当我刷新屏幕较小的手机上的同一页面时，整个网站将缩小到浏览器窗口的左上角，并且帖子在白色背景上处于空闲状态，这不是我编码的一部分。

而且，当我调整桌面上的浏览器窗口时，一些便利贴也会被裁剪掉。作为参考，我没有使用网站上的表格进行布局。如何调整div元素，以使网站在不同屏幕尺寸的设备上看起来相同？

Answer 1

更新-硬编码位置

.section应该将position设置为relative，以指定将absolute定位的子元素锚定到该元素。然后，您可以尝试使用百分比来确保子元素的位置在不同视口上保持在.section之内。

但是，当仅使用内联样式和绝对位置时，无法确保absolute定位的元素将保持预期的位置而不会在不同大小的视口上重叠其他元素。

如果必须使用绝对定位，则需要为每个硬编码到HTML中的.post-it创建ID。然后，在styles.css中为不同的视口大小指定media queries。

我在此处演示了媒体查询和绝对位置：https://codepen.io/sevanbadal/pen/ExjBKEg

这非常繁琐，因为您必须为每个id硬编码新的.post-it。然后在CSS中，将ID添加到您指定的每个媒体查询中。

原始响应-使用弹性布局

您可以使用CSS Flexbox布局。有关详细信息，请查看Mozilla CSS Flexbox文档。

对于您的问题，请将flex应用于“ section”类。然后使用justify-content来调整div数量在flex布局内的显示方式。 Flex-wrap也可以用于将flex-layout的内容分成多行。

您可能希望从.post-it中删除/更改填充。

在.section上尝试此代码：

.section{
  width: 100%;
  height: 1000px;
  background-repeat: repeat-y;
  background-size:contain;
  background-color: #8B8B8B;

  display: flex;
  flex-wrap: wrap;
}

这是.post-it的

.post-it{
  height: 100px;
  width: 100px;
  font-family: 'Monte', sans-serif;
  font-size: 25;
}