2016-04-28 15 views
0

Ich entwerfe eine Komponente für eine Website, die ein fester Inline-Block ist. Es sieht derzeit gut aus auf einem normal großen Bildschirm, aber wenn der Bildschirm kleiner wird, werden die Dinge merkwürdig. Ich habe versucht, eine Medienabfrage zu verwenden, um einige der CSS-Eigenschaften zu ändern, um alle divs vertikal in eine Linie zu bringen. Das scheint nicht zu funktionieren.Verwenden Sie Medienabfrage, um div-Elemente vertikal zu sortieren, wenn die Seite kleiner wird

Außerdem gibt es einen zusätzlichen 10px auf der Unterseite dieses Blocks, die ich auf verschiedene Arten zu entfernen versucht habe und er verschwindet nicht, wenn ich nicht die Höhe fest 300px auf dem größeren äußeren div. Setze. Im Moment versuche ich, die Calc-Funktion zu benutzen, um sie zu entfernen, aber ohne Glück. Wenn jemand das Problem auch kennt, wäre es großartig.

Hier ist die aktuelle Medienabfrage:

@media (max-width: 500px){ 
    #orange-block-right, #orange-picture{ 
    float: left; 
    display: inline; 
    }} 

Hier ist der Link zu der jsfiddle, die mein Leiden demonstrieren. Wenn jemand mich wissen lassen könnte, was das Problem ist, würde ich sehr dankbar sein.

Antwort

1

Zunächst einmal müssen Sie Ihren linken Rand und Breite in den Medien Abfrage zurück:

#orange-block-right { 
    width: 100%; 
    margin-left: 0; 
} 

Ähnliche für die anderen Elemente.

Abgesehen davon, löschen Sie diese Float- und Inline-Eigenschaften, definieren Sie alle diese Elemente als Blöcke und zentrieren Sie deren Inhalt.

+0

Vielen Dank. Dies half mir, die Lösung zu finden. Es gab ein paar Eigenschaften, die ich vergesse, fügte ich hinzu, die auch etwas Not verursachten. – Runner5