0

我有一个页面宽度为 960 像素，我有一排图像要溢出页面的右侧，并允许显示溢出的图像和水平滚动。我不希望整个页面水平滚动，只是那个元素。

使水平滚动工作相对容易，但是如果不增加整个页面的宽度（因此，使页面水平滚动），我就无法显示溢出图像。

我的 CSS：

container{
  width:960px;
  margin: 0 auto;
  }

.pic-container {
  white-space:nowrap; 
  overflow:scroll;
  }

我的（简化的）HTML：

<body>
<container>
  <div class="pic-container">
    <div class="pic-row">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
    </div>
  </div>
</container>
</body>

这是我正在寻找的小图：

在此处输入图像描述

4

2 回答 2

3

这可能会满足您的需求（请参阅此处的 JSFiddle）：

<section>
  <div class="pic-container">
    <div class="pic-row">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
    </div>
  </div>
</section>​

CSS：

body {
   overflow: hidden;
}
section {
  /* The width of your document, I suppose */
  width:600px;
  margin: 0 auto;
  white-space:nowrap; 
  overflow: scroll;
}
.pic-container {
 /* As large as it needs to be */
  width: 1500px;
}​

我们所做的是隐藏 的溢出body，这会阻止水平滚动条，即使页面不够宽以显示所有内容。然后你让它显示容器上的滚动条div，具有设定的宽度（大概是文档的宽度），并使其中的内容div尽可能宽。

另一个实现，它只是设置的宽度section而不是body，可以在这里查看。

于 2012-10-30T20:20:08.230 回答
1

我想不出只使用 html + css 的方法，所以我依靠 JQuery。这实际上工作得很好，而且降级也很好——如果没有 javascript，图像仍然可以滚动，它们只是不会渗入右边距（默认情况下，'.pic-container' div 没有宽度，直到 js 添加它在）。

// Update pic-container width
function picWidth() {
  win = $(document).width();
  width = String( Math.round(((win-960)/2) + 960) );

  $('.pic-container').css({'width' : width});
}
$(window).resize(picWidth);
picWidth();
于 2012-10-30T23:19:51.633 回答