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

他のすべての画像の前に、左側に真っ白な画像を配置するだけかもしれません。画像が完全にスクロール解除されたときに、白い部分が左側のナビゲーション部分の後ろに入るように、幅を十分に広げてください。

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

opacity で半透明にする

#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 に答える
0

「Metro UI Template」をグーグルで検索し、表示された最初の結果からダウンロードしてください...

それを研究し、実験に行きます....

于 2013-10-17T17:59:55.243 に答える