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 回答