如何使用百分比在 html 中定位 div

Question

<div style="position:absolute; top:60px; left:600px">
        <h2>Shop</h2>
    </div>

如何使用百分比在 html 和 css 中定位 divs？如上所示，到目前为止，为了在 html 中定位 divs，我一直在告诉它所在的像素。问题是，当我在像素较少的移动设备上尝试我的网站时，我必须滚动才能看到整个内容。有没有一种方法可以使用百分比来定位 div 应该在的位置，这样您就不需要滚动了？我可以使用 CSS。谢谢

Answer 1

您可以使用百分比，布局将根据屏幕大小自动更改。

<div style="position:absolute; top:5%; left:26%">
  <h2>Shop</h2>
</div>

在上面的代码中，根据设备的大小，商店总是从顶部 5% 和从左侧 26% 出现。

但是这种方法的问题是您会开始看到很多白色 space 更宽的屏幕。更好的方法是使用媒体查询为每个屏幕设置不同的页面样式，而不是让 css 为您处理。您也可以使用像 bootstrap 这样的框架，它允许您设置断点，在该断点处您可以针对不同的屏幕尺寸切换到不同的布局。

如何使用百分比在 html 中定位 div

How to position divs in html with percents

html

css

mobile

position