如何调整第4个图像列以使其成为响应式图像库
我正在尝试通过flex-box创建一个响应式图片库。我在每个容器中有4张图片，并且有4个这样的容器。因此，使用普通的视口，它在 4行4列上运行良好。但是，当我的屏幕范围在 671-880 px 之间时，就会出现问题。在这里，我试图使它成为一个基于3列的画廊，以及它的出现，但是第4栏的底部使情况一团糟。对齐不正确。
请查看我的代码，并让我知道如何对其进行修改。
还有任何改进代码的建议都会更好。
PS：我在css中提到了一条注释行，以便每个人都可以轻松识别问题部分。
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
header{
background: #f1f1f1;
padding: 16px 32px;
text-align: center;
text-decoration-line: underline;
vertical-align: middle;
}
.photos{
margin-top: 5px;
display: flex;
flex-flow: row wrap;
padding: 2px 8px;
#justify-content: center;
width: 100%;
}
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-grow: 1;
display: flex;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img,.photos-col-4 img{
flex-grow: 1;
padding: 4px 4px;
margin: 2px 2px;
}
@media screen and (max-width:1100px){
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-flow: column wrap;
}
}
/* Problem Ocurrs here for 4th column...Scroll down in browser to see the 4th column in view-port range 671-880px*/
@media screen and (max-width:880px) and (min-width:671px){
.photos-col-1,.photos-col-2,.photos-col-3{
flex-flow: column wrap;
width: 33%;
flex:0 1;
margin: 0 auto;
}
.photos-col-4{
flex-flow: row wrap;
padding: 0 32px;
width: 100%;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
flex: 0 1;
padding: 4px 4px;
margin: 2px 2px;
text-align: center
}
.photos-col-4 img{
padding: 0 20px;
}
}
@media screen and (max-width:670px) and (min-width:451px){
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-flow: column wrap;
width: 50%;
flex:0 1;
margin: 0 auto;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
flex: 0 1;
}
}
@media screen and (max-width:450px){
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-flow: column wrap;
width: 100%;
flex:0 1;
margin: 0 auto;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
flex: 0 1;
}
}<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Example Title</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href=""/>
</head>
<body>
<header>
<h1>Responsive Image Grid</h1>
</header>
<main>
<!-- Photo Grid -->
<section class="photos">
<section class="photos-col-1 row">
<img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">
<img src="https://picsum.photos/200/300?random=3">
<img src="https://picsum.photos/200/300?random=4">
</section>
<section class="photos-col-2 row">
<img src="https://picsum.photos/200/300?random=25">
<img src="https://picsum.photos/200/300?random=24">
<img src="https://picsum.photos/200/300?random=23">
<img src="https://picsum.photos/200/300?random=22">
</section>
<section class="photos-col-3 row">
<img src="https://picsum.photos/200/300?random=14">
<img src="https://picsum.photos/200/300?random=13">
<img src="https://picsum.photos/200/300?random=15">
<img src="https://picsum.photos/200/300?random=12">
</section>
<section class="photos-col-4 row">
<img src="https://picsum.photos/200/300?random=6">
<img src="https://picsum.photos/200/300?random=7">
<img src="https://picsum.photos/200/300?random=8">
<img src="https://picsum.photos/200/300?random=9">
</section>
</section>
</main>
<footer></footer>
<script type="text/javascript" src=""></script>
</body>
</html>
2 个答案:
答案 0 :(得分：2)
首先，我认为HTML代码错误，因为您将四张照片包装在一个区域中，然后想要“弹出”其中一张照片。他们应该分为两个或一个，而不是三个。
并且类命名系统还不够好（如何在同一个元素上使用'col'和'row'类？）。它使CSS代码混乱。根据我的经验，类似的代码将很难维护，并会导致难以解释的“怪异”问题。
因此，我没有重新设计您的代码，而是重新设计了您的代码。希望可以解决您的问题并提供一些见识。
HTML代码（放在body标签内）：
<header>
<h1>Responsive Image Grid</h1>
</header>
<main>
<!-- Photo Grid -->
<section class="photos">
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
</section>
</main>
CSS代码：
:root {
/* distance between images */
--gap: 15px;
}
* {
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
header {
background: #f1f1f1;
padding: 16px 32px;
text-align: center;
text-decoration-line: underline;
vertical-align: middle;
}
/* For mobile: */
.photos {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: calc(var(--gap) * -1);
}
.photo {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-width: calc(50% - var(--gap));
height: 300px;
margin-left: var(--gap);
margin-bottom: var(--gap);
}
/* For mobile and up: */
@media (min-width: 600px) {
.photo {
min-width: calc(33.33% - var(--gap));
}
}
/* For tablet and up: */
@media (min-width: 900px) {
.photo {
min-width: calc(25% - var(--gap));
}
}
CMIIW
答案 1 :(得分：0)
请检查此代码。我认为这是您的要求。
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
header{
background: #f1f1f1;
padding: 16px 32px;
text-align: center;
text-decoration-line: underline;
vertical-align: middle;
}
.photos{
margin-top: 5px;
display: flex;
flex-flow: row wrap;
padding: 2px 8px;
justify-content: center;
width: 100%;
}
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-grow: 1;
display: flex;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img,.photos-col-4 img{
flex-grow: 1;
padding: 4px 4px;
margin: 2px 2px;
}
@media screen and (max-width:1100px){
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-flow: column wrap;
}
}
/* Problem occurs here for 4th column...Scroll down in browser to see the 4th column in view-port range 671-880px*/
@media screen and (max-width:880px) and (min-width:671px){
.photos-col-1,.photos-col-2,.photos-col-3{
flex-flow: column wrap;
}
.photos-col-4{
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
padding: 4px 4px;
}
.photos-col-4 img{
padding: 4px 4px;
width: calc(33.3% - 0px);
width: calc(33.3% - 0px);
flex-grow: initial;
margin: 0;
}
}
@media screen and (max-width:670px) and (min-width:451px){
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-flow: column wrap;
width: 50%;
margin: 0 auto;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
flex: 0 1;
}
}
@media screen and (max-width:450px){
.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
flex-flow: column wrap;
width: 100%;
flex:0 1;
margin: 0 auto;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
flex: 0 1;
}
}<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Example Title</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href=""/>
</head>
<body>
<header>
<h1>Responsive Image Grid</h1>
</header>
<main>
<!-- Photo Grid -->
<section class="photos">
<section class="photos-col-1 row">
<img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">
<img src="https://picsum.photos/200/300?random=3">
<img src="https://picsum.photos/200/300?random=4">
</section>
<section class="photos-col-2 row">
<img src="https://picsum.photos/200/300?random=25">
<img src="https://picsum.photos/200/300?random=24">
<img src="https://picsum.photos/200/300?random=23">
<img src="https://picsum.photos/200/300?random=22">
</section>
<section class="photos-col-3 row">
<img src="https://picsum.photos/200/300?random=14">
<img src="https://picsum.photos/200/300?random=13">
<img src="https://picsum.photos/200/300?random=15">
<img src="https://picsum.photos/200/300?random=12">
</section>
<section class="photos-col-4 row">
<img src="https://picsum.photos/200/300?random=6">
<img src="https://picsum.photos/200/300?random=7">
<img src="https://picsum.photos/200/300?random=8">
<img src="https://picsum.photos/200/300?random=9">
</section>
</section>
</main>
<footer></footer>
<script type="text/javascript" src=""></script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？