Frage von milkyway2, 44

HTML/CSS: Floats überlappen sich beim Minimieren, wie behebt man das?

Hallo,

ich bin dabei eine kleine Website zu erstellen. (Nicht online) Dabei habe ich mit dem Responsive Webdesign Probleme. Auf dem Smartphone, Tablet, Pc sieht die Seite gut aus. Jedoch, wenn ich das Browser-Fenster kleiner verschiebe, überlappen sich Bilder mit dem Text an einer Stelle. (Der Text ist speziell in Lists unterteilt.)

Hat mir jemand einen Rat? Die Bilder sind in Div-Boxen, der CSS Code dafür sieht ungefähr so aus:

    vertical-align: top;
    margin-right: xy
    margin-top: xy
    float: right;
    width: auto;
Antwort
von nedi23, 35

Um das zu vermeiden würde ich mit einem Grid-System arbeiten. Die Regeln das automatisch für dich und sind sehr leicht einzubinden. Das Grid-System von Bootstrap kann ich sehr empfehlen. 

http://holdirbootstrap.de/css/

Es gibt aber auch viele weitere die das erledigen können. 

Wenn du das selber machen willst würde mit Media Queries arbeiten:

@media (max-width: 450px) 
{
/* Hier kannst du dann die Position für kleine Bildschirme ändern */ }
Kommentar von milkyway2 ,

Danke, werde ich gleich mal testen. :-)

Antwort
von perhp, 13

Informier dich mal über clearfix, das wird dein Problem sein.

Allgemein gilt, solange du keinen vollständigen Code liefern kannst auf codepen oder ähnliches, kann man dir schlecht weiterhelfen.


Keine passende Antwort gefunden?

Fragen Sie die Community