0

我正在寻找一种能够在此页面中滚动的方法

http://bijusi01.businesscatalyst.com/shoes.html

通过在标题中添加一些代码，我一直在使用 css，但滚动不起作用（可能是因为位置：固定；但这是我现在找到的让它响应的唯一方法）。这是我在头部添加的代码：

#u1760_img {
    height: auto;
    width: 50%;
    float: right;
    z-index: 1;
    left: 0;
    position: fixed;
    margin: auto;
    top: 135px;
}
#u1765_img {
    height: auto;
    width: 50%;
    float: left;
    right: 0;
    text-align:right;
    position: fixed;
    margin: auto;
    z-index: 1;
    top: 135px;
}
4

1 回答 1

0

滚动不起作用：

你有没有想过为什么？

因为这行代码：

position: fixed;

为什么这会使滚动停止？实际上它不是停止滚动，而是锁定了它的位置！当您查看滚动条时，scoll 正在工作，但图像的位置是固定的。您可以使用position: absolute以最小化这种影响。

图片宽度为 50%：

当您50%对图像使用宽度时，实际上是让图像具有最近的父元素的 50% 宽度和一些宽度。例如：

  <div class="someclass">
    <img src="link/to/file.png" alt="photo" />
  </div>

.someclass {
  width: 500px;
}

现在，当您使用 to 设置图像时，width: 50%;它将填充 50% 的 div；那是它的父母。如果您没有设置任何内容，则主体将填充 50%。等等。

我发现的唯一问题是：

position: fixed。_ 这导致了一些问题，一个是非滚动性，实际上是滚动，您可以尝试为页面提供渐变背景，当您滚动时，您会看到更改！

在您的 CSS 中进行一些更改：

#u1760_img {
height: auto;
width: 50%;
float: right;
z-index: 1;
left: 0;
position: fixed;
margin: auto;
top: 135px;
}
#u1765_img {
height: auto;
width: 50%;
float: left;
right: 0;
text-align:right;
position: fixed;
margin: auto;
z-index: 1;
top: 135px;
}

而不是这个，尝试使用这个：

img {
  width: 50%; // set the width
  position: absolute; // but still, its not the only way to position images
  top: 135px;
}

请注意，我没有指定一些 CSS 属性，为什么？z-index除非您有一些要重叠的元素，否则没有必要。所以你不需要这个。

其次，我没有将高度设置为自动，因为浏览器会自动为我们这样做:)

你也在做很多其他的假设，比如text-align, float: left, right: 0;。试着在一开始就避开它们。

当您将图像的宽度设置为 45% 时，下一张图像将出现在第一张图像的前面，因此您不必为每个图像编写类，浏览器会自动为您调整图像！

不确定，但仍然有这个

我不确定你是否想要这个，但我仍然会写信以获取信息。

您可以使用媒体查询来创建可在移动设备上运行的动态页面，例如您网站的移动版本。您也可以尝试使用width: 50%（实际上是）使浏览器在调整图像大小时始终适合其中的图像。

参考：

http://css-tricks.com/css-media-queries/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

在 css 中使用 % 调整图像大小

https://developer.mozilla.org/en-US/docs/Web/CSS/position

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

于 2013-10-20T10:47:40.197 回答