gpt4 book ai didi

html - 具有响应边距的 CSS Gallery

转载 作者:行者123 更新时间:2023-11-28 15:48:14 24 4
gpt4 key购买 nike

我想创建一个画廊,每个元素之间的间距相等,填满容器 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>

最佳答案

关于使用 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

关于html - 具有响应边距的 CSS Gallery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42318205/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com