个人中心
gpt4 book ai didi

html - 如何调整第 4 个图像列以使其成为响应式图像库

转载 作者：太空宇宙 更新时间：2023-11-04 00:37:03 24 4
gpt4 key购买 nike

我正在尝试通过 flex-box 创建响应式图片库。我在每个容器中有 4 个图像，并且有 4 个这样的容器。因此，对于普通视口(viewport)，它在 4 行和 4 列 下运行良好。但是当我的屏幕范围在 671-880 px 之间时，问题就出现了。在这里，我试图使它成为一个基于 3 列的画廊和它的发生，但是第 4 列底部变得一团糟。它没有正确对齐。

请看一下我的代码，让我知道如何修改它。

还有任何改进代码的建议会更好。

PS:我在css中提到了一个注释行，这样大家可以很容易地找出问题的部分。

image 

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

最佳答案

首先，我认为 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));
   }
 }

中国工业联合会

关于html - 如何调整第 4 个图像列以使其成为响应式图像库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59175766/

24 4 0
文章推荐： python - 使用 basemap 绘制经线和纬线
文章推荐： c - 什么是二进制文件的 EOF？
文章推荐： C: 在不显式传递 `this` 的情况下调用类方法？
文章推荐： python - 为 mnist 数据集构建我的 CNN 时准确率非常低
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com