Aligning Bild und div über Bildschirmgrößen

Ich versuche, meine erste Website zu entwerfen, und ich habe Probleme, meinen Top-Bar CSS Ausrichtung mit meinem Logo auszurichten, ich habe das Gefühl, ich dies falsch tue, weil auf den Bildschirm des Benutzers abhängig Größe wird es auch anders aussehen mit einer festen Höhe CSS-Wert.Aligning Bild und div über Bildschirmgrößen

Dies ist, was ich will es so aussehen wie auf allen Bildschirm resoloutions:

das ist, was es wie auf einem unteren Bildschirm res aussieht:

unten ist mein Markup:

h1 { 
 
    color: #111; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 45px; 
 
    font-weight: bold; 
 
    letter-spacing: -1px; 
 
    line-height: 1; 
 
    padding: 20px; 
 
} 
 

 
h2 { 
 
    color: #111; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 30px; 
 
    font-weight: 300; 
 
    line-height: 32px; 
 
    margin: 0 0 72px; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: #685206; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    margin: 0 0 24px; 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 

 
.topbar { 
 
    background-color: #EEB84F; 
 
    width: 100%; 
 
    height: 40px; 
 
    padding: 5px; 
 
    position: fixed; 
 
} 
 

 
.logo { 
 
    min-width: 100%; 
 
    width: auto; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    margin-top: -50px; 
 
} 
 

 
.thumbwrapper { 
 
    width: auto; 
 
} 
 

 
.thumb { 
 
    background: white; 
 
    float: left; 
 
    margin: 20px; 
 
} 
 

 
.thumb { 
 
    width: 121px; 
 
    height: 174px; 
 
} 
 

 
.img { 
 
    box-shadow: 10px 10px 5px #888888; 
 
    max-width: 100%; 
 
    width: 121px; 
 
    height: 174px; 
 
    border-radius: 6px; 
 
} 
 

 
.img:hover { 
 
    box-shadow: 10px 10px 5px #666688; 
 
    cursor: pointer; 
 
} 
 

 
.left { 
 
    width: 10%; 
 
    height: 100%; 
 
    position: fixed; 
 
    outline: 1px solid; 
 
    background: #333; 
 
} 
 

 
.right { 
 
    width: 90%; 
 
    height: auto; 
 
    outline: 0px solid; 
 
    position: absolute; 
 
    right: 0; 
 
    background: #FFF; 
 
}

<div class="left"> 
 
    <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="topbar"></div> 
 
    <h1>Latest Additions</h1> 
 
    <div class="wrapper"> 
 
    <div class="thumbwrapper"> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div> 
 
    </div> 
 
    </div> 
 
</div>

oder Sie können es bei this online location

Quelle

2017-07-27 Dean

Das Problem Live-Ansicht ist, dass Ihr logo Bild wird schrumpfen, wenn Sie auf kleineren Bildschirmen gehen. Da das Bild in die 10% Breite passen muss, setzen Sie die .left Div.

Nun werde ich nicht Ihre gesamte Struktur ändern, aber ich schlage vor, Sie setzen eine Höhe von 50px auf die .logo (das div um das Bild) und eine background-color: #EEB84F. Dies liegt daran, dass diese Stile in topbar festgelegt sind.

Dann können Sie mithilfe von Display die logo img Zentrum: flex auf logo

siehe Snippet unten oder Geige>jsFiddle

.logo { 
 
    min-height:50px; 
 
    background:#EEB84F; 
 
    display:flex; 
 
    align-items:center; 
 
} 
 

 
h1 { 
 
    color: #111; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 45px; 
 
    font-weight: bold; 
 
    letter-spacing: -1px; 
 
    line-height: 1; 
 
    padding: 20px; 
 
} 
 

 
h2 { 
 
    color: #111; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 30px; 
 
    font-weight: 300; 
 
    line-height: 32px; 
 
    margin: 0 0 72px; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: #685206; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    margin: 0 0 24px; 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 

 
.topbar { 
 
    background-color: #EEB84F; 
 
    width: 100%; 
 
    height: 40px; 
 
    padding: 5px; 
 
    position: fixed; 
 
} 
 

 
.logo { 
 
    min-width: 100%; 
 
    width: auto; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    margin-top: -50px; 
 
} 
 

 
.thumbwrapper { 
 
    width: auto; 
 
} 
 

 
.thumb { 
 
    background: white; 
 
    float: left; 
 
    margin: 20px; 
 
} 
 

 
.thumb { 
 
    width: 121px; 
 
    height: 174px; 
 
} 
 

 
.img { 
 
    box-shadow: 10px 10px 5px #888888; 
 
    max-width: 100%; 
 
    width: 121px; 
 
    height: 174px; 
 
    border-radius: 6px; 
 
} 
 

 
.img:hover { 
 
    box-shadow: 10px 10px 5px #666688; 
 
    cursor: pointer; 
 
} 
 

 
.left { 
 
    width: 10%; 
 
    height: 100%; 
 
    position: fixed; 
 
    outline: 1px solid; 
 
    background: #333; 
 
} 
 

 
.right { 
 
    width: 90%; 
 
    height: auto; 
 
    outline: 0px solid; 
 
    position: absolute; 
 
    right: 0; 
 
    background: #FFF; 
 
}

<div class="left"> 
 
    <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="topbar"></div> 
 
    <h1>Latest Additions</h1> 
 
    <div class="wrapper"> 
 
    <div class="thumbwrapper"> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div> 
 
    </div> 
 
    </div> 
 
</div>

Als Anregung, sollten Sie .topbar setzen außerhalb der left und right Div. und lege das Logo hinein.

Ihre Struktur sollte auch nicht sicher, so etwas wie

<div class="topbar"> 
    <div class="logo"> 
      <img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /> 
    </div> 
</div> 
<div class="content"> 
    <div class="left"> 
    </div> 
    <div class="right"> 
    </div> 
</div>

, warum Sie benötigen, dass left div, Sie leicht, dass gray Abschnitt ohne einen neuen div (Rand- oder pseudo-Elemente etc.) machen können

Quelle

2017-07-27 08:10:52

cheers für die ausführliche Antwort.Ich habe sie jetzt arbeiten lassen. – Dean

froh, ich könnte helfen. Prost ! : D –

Wenn Sie möchten, dass das Logo immer ohne Überlappung oben liegt, können Sie für dieses Logo eine spezifische Höhe von etwa height: 50px festlegen. Andernfalls verwenden Sie die Medienabfrage, um die Höhe speziell für niedrigere Auflösungen festzulegen.

Quelle

2017-07-27 08:13:30 kmg

Wenn Sie eine Höhe von 50px für das Logo festlegen, müssen Sie "width: auto" einstellen, damit das Bild das gleiche Seitenverhältnis wie das Original hat. Die Breite des Logos wird also die Breite des verfügbaren Platzes überschreiten und somit aus dem Container herausgehen –

Sie müssen nur die Höhe von .logo wie die Höhe von .topbar + padding erhöhen. Unter Verwendung von transform Bild in der Mitte von .logo ausrichten, müssen Sie bei Bedarf die Medienabfrage bei einer bestimmten Bildschirmauflösung verwenden.

h1 { 
 
    color: #111; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 45px; 
 
    font-weight: bold; 
 
    letter-spacing: -1px; 
 
    line-height: 1; 
 
    padding: 20px; 
 
} 
 

 
h2 { 
 
    color: #111; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 30px; 
 
    font-weight: 300; 
 
    line-height: 32px; 
 
    margin: 0 0 72px; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: #685206; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    margin: 0 0 24px; 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 

 
.topbar { 
 
    background-color: #EEB84F; 
 
    width: 100%; 
 
    height: 40px; 
 
    padding: 5px; 
 
    position: fixed; 
 
} 
 

 
.logo { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #EEB84F; 
 
} 
 

 
.logo > img { 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    margin-top: -50px; 
 
} 
 

 
.thumbwrapper { 
 
    width: auto; 
 
} 
 

 
.thumb { 
 
    background: white; 
 
    float: left; 
 
    margin: 20px; 
 
} 
 

 
.thumb { 
 
    width: 121px; 
 
    height: 174px; 
 
} 
 

 
.img { 
 
    box-shadow: 10px 10px 5px #888888; 
 
    max-width: 100%; 
 
    width: 121px; 
 
    height: 174px; 
 
    border-radius: 6px; 
 
} 
 

 
.img:hover { 
 
    box-shadow: 10px 10px 5px #666688; 
 
    cursor: pointer; 
 
} 
 

 
.left { 
 
    width: 10%; 
 
    height: 100%; 
 
    position: fixed; 
 
    outline: 1px solid; 
 
    background: #333; 
 
} 
 

 
.right { 
 
    width: 90%; 
 
    height: auto; 
 
    outline: 0px solid; 
 
    position: absolute; 
 
    right: 0; 
 
    background: #FFF; 
 
}

<div class="left"> 
 
    <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="topbar"></div> 
 
    <h1>Latest Additions</h1> 
 
    <div class="wrapper"> 
 
    <div class="thumbwrapper"> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-07-27 08:21:54 frnt

Aligning Bild und div über Bildschirmgrößen

Antwort

Verwandte Themen