Question

我已经在互联网上搜索了一个水平滚动网站（即：http://nquinones.4ormat.com/fashion-1）的答案，但没有成功。

HTML：

<div id="horizontal">
    <div class="picture">
        <img src="pic01.jpg" />
    </div>
    <div class="picture">
        <img src="pic02.jpg" />
    </div>
    <div class="picture">
        <img src="pic03.jpg" />
    </div>
</div>

CSS：

#horizontal {
    width: 2000px;
}

.picture {
    float: left;
}

img {
     height: auto;
     max-width: 100%;
}

我真的迷失了。任何帮助将不胜感激。

由于

Answer 1

也许只是在所有其他图像之前在左侧放置一个纯白色图像。使其足够宽，以便在图像完全展开时，白色部分位于左侧导航部分的后面。

<div id="horizontal">
    <div class="picture">
        <img src="allwhitebox.jpg" />
    </div>
    <div class="picture">
        <img src="pic01.jpg" />
    </div>

你用不透明度做半透明的东西

#left-margin {
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

我脑子里的东西说你需要：

.picture {
    float: left;
    display: inline-block
}

Answer 2

只需谷歌“Metro UI模板”＆amp;从显示的第一个结果下载...

研究它＆amp;去试验....

水平滚动网站响应？

2 个答案: