Das macht mich wahnsinnig: Ich habe eine kleine Frage, die drei Divs horizontal schiebt.

GEIGE

Edit 3:Live-Demo; Komplette Website, die zeigt, wie es funktionieren soll..bis um Ich habe weniger als 775px. Bitte ändern Sie die Fenstergröße, um zu sehen, was ich meine.

EDIT, auf vielfachen Wunsch. Was ich will: In kleinen Bildschirmen sagen wir ab 700. Ich möchte, dass ein Panel den Bildschirm ausfüllt. Zu einer Zeit.

2. Bearbeitung:Es funktioniert gut bei über 700px. Darunter; Ich möchte, dass auf dem Bildschirm jeweils nur ein Fenster angezeigt wird, und wenn gewünscht (durch Klicken auf das aktuelle Fenster), wird das nächste Fenster zur Seite verschoben. Das heißt Keine gestapelten Säulen, das ist das klassische Responsive Design. Bitte sehen Sie Fiddle. Es ist alles in Ordnung, bis Sie das Browserfenster minimieren oder ein mobiles Gerät verwenden.

Ich definiere panel1 und panel2 alsfixed width, und verwenden Sie css calc, um das dritte Panel bei 100% minus panel1 (200px) und panel2 (200px) zu halten:(calc 100% - 400px)

Das funktioniert in Ordnung, bis ich auf kleine Bildschirme gehe. Dann geht es drunter und drüber: Die Paneele werden vertikal übereinander gestapelt (ich möchte die Paneele nicht aktiv verstecken), und wegen der festen Breite sehe ich winzige Stücke von gequetschten Paneelen rechts. Idealerweise möchte ich, dass jedes Panel kleine Bildschirme zu 100% ausfüllt.

Was ich brauche, ist folgende Hilfe:

Ich muss es auch

finde einen Weg, um diese JS-Definition der Gleitentfernung von Pixeln zu% zu ersetzen

 var margins = {
        panel1: 0,
        panel2: -200,
        panel3: -400,               
    }

..und daher in der Lage sein, meine CSS-Berechnung (100% - 20%) oder so etwas zu tun.

..oder finden Sie zumindest eine Möglichkeit, Panels auf kleinen Bildschirmen auszublenden.

Alle Hinweise sehr geschätzt.