2016-10-18 6 views
0

Ich habe vier Inline-Bilder, die die Breite meines mobilen Browsers erweitern wird. Unterhalb, am linken Rand, habe ich ein Menü mit internen Links zu jedem Bild. Dies alles funktioniert, und wenn Sie auf den vierten Link klicken, wird das Bildfenster zum Bild ganz rechts gerollt.Benötigen statisches Menü, wenn Überlauf-X: Bildlauf

Ich möchte, dass das Menü am linken Rand eingepflanzt bleibt, aber es scrollt vom Bildschirm weg und folgt dem linken Rand. Ich habe die Position ausprobiert: fest und absolut, aber sie wird nicht fixiert bleiben, wie beim festen Scrollen nach oben und unten.

<style> 
    img {border:blue solid thin; width:100%; } 

    .scroller {display:inline; max-width:180px; white-space:nowrap; 
    text-align:left; } 
    </style> 
    </head> 
    <body> 

    <div style="position:absolute; top:0; left:0;"> 

    <div class="scroller" style=""> 
    <div style="display:inline-block; height:300px; border:red solid thin;"> 
     <img src="car_1.gif" id="1" > 
    </div> 
    <div style="display:inline-block; height:300px; border:red solid thin;"> 
     <img src="car_2.gif" id="2"> 
    </div> 
    <div style="display:inline-block; height:300px; border:red solid thin;"> 
     <img src="car_3.gif" id="3"> 
    </div> 
    </div> 

    <div style="position:absolute; top:330px; left:0; padding:20px; 
    border:solid green thin;"> 
     <a href="#1">one</a> 
     <a href="#2">two</a> 
     <a href="#3">three</a> 
    </div> 
    </div> 
+0

Geben Sie bitte einen Code ein. Es ist irgendwie schwierig, all das in meinem Kopf zu visualisieren. – Tom

Antwort

0

Sie können Position verwenden: fest oder Position absolute Dann wird das Menü statisch es bewegen würde nicht.

+0

Versuchte das; funktioniert nicht für horizontales Scrollen. – marr

+0

ich bekomme keine bitte screenshoots vor und nach anschließen dann werde ich es versuchen –