Question

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

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;
}

Answer 1

滚动不起作用：

你有没有想过为什么？

由于这行代码：

position: fixed;

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

图像宽度为50％：

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

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

.someclass {
  width: 500px;
}

现在，当您将图像设置为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。所以你不需要这个。

其次，我没有将高度设置为auto，因为浏览器会自动为我们执行此操作：）

你正在制定很多其他假设，例如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

resize images using % in css

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

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

50％宽度响应式设计问题

1 个答案: