Question

你可以帮我解决这个问题...当我调整浏览器窗口大小时，一切都开始移动。我设法解决了这个问题：

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

但现在网站太小了。我希望它是全屏，而不是960px宽度..当我自动制作宽度和高度时，一切都开始再次移动。该怎么办？

Answer 1

您的样式存在问题，您使用每个度量的百分比，这意味着根据父级调整您的位置，父级是窗口大小。

如果你不限制包装纸的宽度，那么它的正常移动就会移动。

您可以使用min-width来处理此问题。

#wrapper {
       margin: 0 auto;
       min-width:960px;
   }

Answer 2

通常这个CSS应该可以工作：

#wrapper {
    margin: 0 auto; /*center div => only alternative of your version*/
    min-width:960px;
    width: auto;
}

Answer 3

我怀疑你想要这样的事：
http://codepen.io/simply-simpy/pen/aOyoZM

* {
  margin: 0
}
html,body,wrap {
  height: 100%;
}
.content {
  width: 960px;
  margin: 0 auto;
  background: #eee;
  height: 100%;
  font-size: 36px;
}
.wrap {
  background-image: url('https://placeimg.com/640/480/arch');
  height: 100%;
  background-size: cover;
}

<div class="wrap">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>

HTML / CSS包装问题

3 个答案: