CSS

Question

我正在构建一个相当简单的静态纯前端网页。我的包装器 div（页面中的所有其他内容都在其中）和主体有以下 css 规则：

body {
  background-image: url(../img/background.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}

#content_wrapper {
  margin: 15px 10%; /*Client wants 20% instead of 10. Navbar must be adjusted accordingly*/
  min-width: 900px;
  padding: 0;
  border-radius: 10px;  
}

哪个工作正常：

但是，正如您在我的评论中看到的那样，客户更喜欢 20% 的边距，以使整个页面更窄。然而，这种情况发生了：

页面右移。这与我在平板电脑上打开此页面时遇到的视觉问题几乎相同，即使使用 10% 的边距也是如此（尽管我希望解释为什么平板电脑会发生这种情况，但这不是这里问题的重点）。我怎样才能解决这个问题？据我所知，这不应该发生

Answer 1

当你说

margin: 15px 20%;

你实际上是在告诉你左手和右手 margin 都有 20%。这意味着 #content_wrapper 容器的最大值为 60%。问题是 60% 可能比可用的 space 大。我相信您应该将 width 添加到规则中：

width: 60%;

Answer 2

好吧，请尝试将其更改为 width: 15px 20% 15px 10%; 您希望仅将左侧页边距更改为 10%。或者在 .content-wrap 的每一侧放置 2 个空白 div，宽度为 10%，并使用幻像数据为其提供宽度

CSS - 以百分比居中 div 的奇怪问题

CSS - Odd issue with centering a div with percentages

html

margin

frontend