具有响应式保证金的CSS图库

我想创建一个各个项目之间具有相等间距的图库，填充整个容器div的宽度，然后将项目添加到新行。到目前为止，我得到了这个，除了保证金没有响应（并且没有填写窗口）之外，它在各方面都工作得很好。试过不同的解决方案，如：http://jsfiddle.net/thirtydot/EDp8R/3/哪些工作不正常。具有响应式保证金的CSS图库

<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>

来源

2017-02-18 S. Doe

有什么关于使用display: flex和justify-content: space-between？另外，您不需要为每个框使用不同的类，您可以使用:nth-child(even)选择器。检查了这一点：

.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

来源

2017-02-18 17:24:11

具有响应式保证金的CSS图库

回答

相关问题