0

I've searched the internet for an answer to making a horizontal scrolling site (ie: http://nquinones.4ormat.com/fashion-1 ) responsive with no success.

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

I'm really lost on this. Any help would be appreciated.

Thanks

4

2 回答 2

0

只需谷歌搜索“Metro UI 模板”并从显示的第一个结果中下载它......

研究它并去实验......

于 2013-10-17T17:59:55.243 回答
0

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

<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
}
于 2013-10-17T17:30:32.683 回答