CSS-Galerie mit Responsive-Rand

Ich möchte eine Galerie von Arten erstellen, die gleichen Abstand zwischen den einzelnen Elementen haben, füllt die gesamte Breite des Container-Div und fügt Elemente zu einer neuen Zeile danach. Bis jetzt habe ich das, was in jeder Hinsicht gut funktioniert, außer dass der Rand nicht anspricht (und dadurch das Fenster nicht ausfüllt). Versucht verschiedene Lösungen wie: http://jsfiddle.net/thirtydot/EDp8R/3/ die nicht richtig funktioniert.CSS-Galerie mit Responsive-Rand

<html> 
<style> 

body { 
    margin: 0; 
} 

.movie-container { 
    width: 11em; 
    height: 16.2em; 
    display: inline-block; 
    background-color: red; 
} 

.movie { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
    background-color: green; 
} 

.poster { 
    width: 100%; 
    height: auto; 
    margin: auto; 
    position: absolute; 
} 

</style> 
<div id="main-container"> 
<div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div> 
    <div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div> 
    <div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div> 
    <div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div> 
    <div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div> 
    <div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div> 
    <div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div> 
    <div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div> 
    <div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div> 
    <div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div> 
    <div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div> 
    <div id="21374218" class="movie-container"> 
    <div class="movie"><img class="poster" src="/1.jpg"></div> 
    </div>

Quelle

2017-02-18 S. Doe

Was ist über display: flex und justify-content: space-between mit? Außerdem müssen Sie nicht für jede Box verschiedene Klassen verwenden, Sie können :nth-child(even) Selektor verwenden. Check this out:

.container { 
 
    border: 2px dashed #444; 
 
    height: 125px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    /* just for demo */ 
 
    min-width: 612px; 
 
} 
 

 
.box { 
 
    width: 150px; 
 
    background: #ccc 
 
} 
 

 
.box:nth-child(even) { 
 
    background: #0ff 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

JSFiddle

Quelle

2017-02-18 17:24:11

CSS-Galerie mit Responsive-Rand

Antwort

Verwandte Themen