如何使用 DIV 或其他在 HTML & CSS 中定位图像

Question

你好，我一直在寻找不同的教程，我尝试了不同的方法，但到目前为止没有任何效果所以我来这里是想知道是否有人可以帮助我完成这个测试项目（为了学习）或将我重定向到我正在解释我的问题的教程：

我想定位我的图片（目前处于这种状态：https://prnt.sc/11ojid4 by positioning them this way: https://prnt.sc/11ojiuk） 所以我想这样定位它们： 2 张图片，然后：下面的 3 张图片将像图片一样居中在这 3 张图片下方添加最后 3 张如果不清楚告诉我我可以解释，如果不是在屏幕上你可以看看它非常明确但正如我所说我可以解释

目前我的代码如下所示：（在触摸 css 中的图像之前放回我的代码）：

    @import url(https://fonts.googleapis.com/css?family=Dosis:300,400);


* {
    margin: auto;
    padding: auto;
}

body {
    min-height: 100vh;
    background-color: #3e3e3e;
}

header {
    background-color: rgba(15, 15, 15, 0.99)!important;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
    left: 50%;
    padding: 10px 20px;
    text-align: center;
    opacity: 0.9;
}


.home, .forums, .store {
    padding: 10px 15px;
    background: transparent;
    border: none;
}

.home-a {
    color: white;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
}



.forums-a {
    color: white;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 22px;

}


.store-a {
    color: white;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
}


.register {
    padding: 10px 15px;
    list-style-type: none;
    padding-right: 15px;
    text-align: center;
}

.register-a {
    color: white;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;

}

.login {
    padding: 10px 15px;
    list-style-type: none;
    text-align: center;
}

.login-a {
    color: white;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
}


.login-register {
    display: flex; 
    justify-content: center;
}

img {
    width: 256px;
    height: 50px;
}

.header-logo {
    position: absolute;
    top: 10px;
    left: 10px; 
    width: 192px;
    height: 50px;
}



/* Ne pas faire attention je test un effet shine sur mes boutons */
.home-a:hover {
    color: rgba(255,255,255,.55);
  }
  
  .store-a:hover {
    color: rgba(255,255,255,.55);
  }
  
  .forums-a:hover {
    color: rgba(255,255,255,.55);
  }
  
  .login-a:hover {
    color: rgba(255,255,255,.55);
  }

  .register-a:hover {
    color: rgba(255,255,255,.55);
  }
  

  .features {
    height: 600px;
    background-color: #3e3e3e;

}

.purchase {
    height: 600px;
    background-color: #3e3e3e;

}


.kurium__title {
    margin: 0;
    padding: 0;
    padding-top: 50px;
    font-family: 'Nunito';
    font-size: 36px;
    color: #DDDDDD;
    font-weight: 300;
    padding-left: 600px;
    display: inline-block;
}

.kurium__second__title {
    font-size: 36px;
    font-family: "Nunito";
    font-weight: 700;
    color: #ffffff;
    display: inline-block;

}

  .features__title {
      padding-top: 20px;
      display: block;
      padding-right: 140px;
      text-align: center;
      font-family: 'Nunito';
      font-size: 21px;
      color: rgb( 255, 255, 255 );

  }

  .purchase__title {
    display: block;
    padding-right: 140px;
    text-align: center;
    font-family: 'Nunito';
    font-size: 21px;
    color: rgb( 255, 255, 255 );
  }

  .media__title {
    display: block;
    padding-right: 140px;
    text-align: center;
    font-family: 'Nunito';
    font-size: 21px;
    color: rgb( 255, 255, 255 );
  }


  footer {
      text-align: center;
      color:  rgb( 255, 255, 255 );
      text-decoration: none;
      font-family: 'Nunito';
      font-size: 17px;
      padding: 10px 20px;
      padding-right: 120px;
      box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
      background-color: rgba(34, 33, 33, 0.1)!important;
  }

  .image__feature {
  }


**And for my HTML file here it is:**

    <!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="main.css">

    <link rel="icon" type="img/svg+xml" href="img/favicon.svg">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">

    <title>Home | Kurium v4.5</title>

</head> 

<body>

    <header>
        <div style="display: flex;">
        
            <div style="width: 100%;">
        <ul class="kurium-button">
            <img class="header-logo" src="img/logo.svg" alt="Kurium Header Logo">
    
            <button class="home"><a class="home-a" href="https://google.fr/">Home</a> </button>
            <button class="forums"><a class="forums-a" href="https://google.fr/">Forums</a> </button>
            <button class="store"><a class="store-a" href="https://google.fr/">Store</a> </button>
        </ul>
    </div>
        
        <div style="width: 10%;">
            <ul class="login-register">
            <!-- A remplacer par : Flexbox -->
            <li class="register" style="float:right"><a class="login-a" href="register.html">Login</a></li></button>
            <li class="login" style="float:right"><a class="register-a" href="login.html">Register</a></li></button>
        </ul>
    </div>
    </div>
        </header>
          <div class="title__wrapper"></div>
            <h1 class="kurium__title">Kurium.</h1>
            <h1 class="kurium__second__title">  Like steroids for Minecraft</h1>
          </div>

        <h1 class="features__title">Features</h1>
          <div class="features">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
            <img class="image__feature" src="https://via.placeholder.com/150">
          </div>

        <h1 class="purchase__title">Purchase</h1>
          <div class="purchase">
            <img class="image__purchase" src="https://via.placeholder.com/150">
            <img class="image__purchase" src="https://via.placeholder.com/150">
          </div>


        <h1 class="media__title">Media</h1>
          <div class="media">
            <img class="image__media" src="https://via.placeholder.com/150">
            <img class="image__media" src="https://via.placeholder.com/150">
            <img class="image__media" src="https://via.placeholder.com/150">
            <img class="image__media" src="https://via.placeholder.com/150">
            <img class="image__media" src="https://via.placeholder.com/150">
            <img class="image__media" src="https://via.placeholder.com/150">
          </div>


<!--  Sidebar (Right side in the center) 
            <h1 class="social">Follow US !</h1>
        <div class="follow_us">
            <img class="image_social" src="img/twitter.svg">
            <img class="image_social" src="img/instagram.svg">
            <img class="image_social" src="img/facebook.svg">
            <img class="image_social" src="img/youtube.svg">
            <img class="image_social" src="img/tiktok.svg">
        </div>
-->

        <footer>
            Copyright by Kurium 2017 - 2021
        </footer>

</body>

</html>

我真的希望有人能够帮助我，因为一个多星期以来我的大脑在燃烧，关于 flexbox 的法语教程是无法理解的，因此如果有人有解决方案，可以稍微解释一下更多详细信息，我是 taker/if 你有关于 flexbox 的教程（最好是法语，但如果用英语很好地解释就可以了）提前感谢社区将要提供的帮助我希望很快轮到我带一些 x)

Answer 1

我遇到了一个使用 flexbox 的解决方案，它也是响应式的，首先，在您的 HTML 文件中，我添加了一些额外的 div 并将图像存储为一组 2、3 和 3

   <div class="features">
        <div class="features-row-1">
          <img class="image__feature" src="https://via.placeholder.com/150">
          <img class="image__feature" src="https://via.placeholder.com/150">
        </div>
        <div class="features-row-1">
          <img class="image__feature" src="https://via.placeholder.com/150">
          <img class="image__feature" src="https://via.placeholder.com/150">
          <img class="image__feature" src="https://via.placeholder.com/150">
        </div>
        <div class="features-row-1">
          <img class="image__feature" src="https://via.placeholder.com/150">
          <img class="image__feature" src="https://via.placeholder.com/150">
          <img class="image__feature" src="https://via.placeholder.com/150">
        </div>
      </div>

添加了 70vw 的容器宽度以提高响应能力

 .features {
     /* setting container width responsive */
    width: 70vw; 
     background-color: #3e3e3e;
 }

为每个 features-row-1 设置 flexbox 属性 div

  .features-row-1{
     display: flex;
     justify-content: center;
}

以 70vw 的百分比定义宽度和高度，如功能中所定义 div

.image__feature {
     width: 20%;
     height: 30%;
     margin: 5px 10px 5px 10px;
   }

如需输出，请参阅我的codepen

如何使用 DIV 或其他在 HTML & CSS 中定位图像

How to position an image in HTML & CSS with DIV or other

html

css

image

css-position