Question

我想创建一个各种各样的画廊，每个项目之间的间距相等，填充容器div的整个宽度，然后将项目添加到新行。到目前为止，我得到了这个，除了边缘没有响应（并且没有填满窗口）之外，它在各方面都能正常工作。尝试了不同的解决方案，例如：http://jsfiddle.net/thirtydot/EDp8R/3/无法正常工作。

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

Answer 1

关于使用display: flex和justify-content: space-between的内容是什么？此外，您不需要为每个框使用不同的类，您可以使用:nth-child(even)选择器。看看这个：

＆＃13;

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

＆＃13;

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

＆＃13;

JSFiddle

具有响应边距的CSS图库

1 个答案: