Question

所以我有一个页面，其中标题图像可以比内容的宽度宽。比方说，内容总是960px宽，但标题图像可以宽1200px。

因此，为了保持标题图像居中，我使用左边：+/- 50％技巧。

<div class="page">
  <header>
      <div class="image"><img /></div>
  </header>
  <article>lots of text...</article>
<div>

div.page {
  width: 200px;
  background: blue;
  margin: 0 auto;
  height: 400px;
}

header {
  height: 75px;
}

div.image {
      position: absolute;
  left: 50%;
  border: 1px red solid;
}

img {
  position: relative;
  left: -50%;
  height: 50px;
  width: 500px;
  background: green;
}

article {
  background: yellow;
}

因此，在这个小提琴http://jsfiddle.net/P7F7j/中，您可以看到水平滚动条显示，因为div.image在屏幕外，如果img也在屏幕外，也会发生同样的情况。有没有办法从流中删除这些元素，以便它们不会触发水平滚动？

Answer 1

制作标题min-width: 960px; width: 100%;并将图片设置为background-image，格式为no-repeat center top

这样，标题始终至少为960像素，并且将填充您的图像。使用背景图像自动处理溢出。

防止在主要内容区域外部水平滚动

1 个答案: