尝试使用 div 排列六个图像

Posted 2023-03-05

技术标签:

【中文标题】尝试使用 div 排列六个图像【英文标题】：Trying to line six images using div 【发布时间】：2022-01-10 18:52:13 【问题描述】：

在排列六张图片（每行两张图片，两行之间有文字）时，我一直遇到问题。出于某种原因，我无法将它们对齐在中心，我真的可以在我失去理智之前使用一些技巧。即使屏幕发生变化，我也希望它们保持所附图像的状态，有人可以帮忙吗？ screenshot of my webpage

<!DOCTYPE html>
<html>
<div id="wrapper">
    <title>HighItsKy</title>
    <link href="test.css" rel="stylesheet">
    <link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
    <link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">     


    <div class="backgroundcolor">
        <h1>Community</h1>
            <h2>One of the most remarkable things about my streaming experience is that I have grown a fantastic community and met some wonderful people;
            the "Kyngdom" is where we build each other up, share memes, play games, and talk. We love and only want the best for each other here!</h2>
    </div>
    <div class="video-trailer">
            <h1>GALLERY</h1>
        <div class="fanartrow">
            <div class="fanartcolumn">
                <img src="fanart7.jpg" >
            </div>
            
            <div class="fanartcolumn">
                <img src="fanart5.jpg" >
            </div>

            <h2>Left Image- Done by @Samzx_x on Twitch <br> Right Image- Done by @Vivkins on Twitch</h2>
        </div>
        <div class="fanartrow">
            <div class="fanartcolumn">
                <img src="fanart4.jpg" >
            </div>
            <div class="fanartcolumn">
                <img src="fanart1.jpg" >
            </div>
            <h2>Both Images- Done by @This_Lettuce on Twitter</h2>
        </div>
        <div class="fanartrow">
            <div class="fanartcolumn">
                <img src="fanart2.jpg" >
            </div>
            <div class="fanartcolumn">
                <img src="fanart3.jpg" >
            </div>
            <h2>Left Image- Done by @This_Lettuce on Twitter <br> Right Image- Done by @Derpy_Pandaa on Twitch</h2>
        </div>
    </div>

        </div>

.backgroundcolor /* To get that cream color background!*/
    background-color: #f8f8f8;


.backgroundcolor h1, .backgroundcolor hr
    margin-bottom: 90px;


.backgroundcolor ul
    padding-bottom: 70px;


.backgroundcolor a

    color: #987b74;


.video-trailer h1
    color: #987b74;

.video-trailer h2 a
    color: #987b74;

.video-trailer h2 a:hover
    color: #FACABC;


.video-trailer a
    color: #987b74;


.video-trailer
    background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8);
    margin-top: 170px;


/* Clear floats after image containers */
.fanartrow::after 
  content: "";
  clear: both;
  display: table;



.fanartrow
    padding-left: 500px;
    padding-right: 100px;


.fanartrow h2
    text-align: center;
    padding-right: 600px;
    padding-left: 200px;
    font-size: 125%;


.fanartcolumn 
  float: left;
  width: 33.33%;
  padding: 5px;


.fanartcolumn img
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;






@media screen and (max-width: 640px)

    body, html
        overflow-x: hidden;
        padding: 0.8em 0;
        width: 100vw;
    
    .col-25, .col-75, input[type=submit] 
    width: 100%;
    margin-top: 0;
  
  .tabs
    flex-direction: column;
    align-items: center;
  
  h2font-size: 100%; 
  
   .title
        font-size: 25%;
   
   container 
   height: 180px;
   width: 100%;
   display: flex;
   align-items: center;
 
iframe
    width: 300px;
    height: 200px;
     margin-left: 50vw;
  transform: translate(-50%);


.fanartcolumn img
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;


  


@media (max-width: 1200px) 
    .container nav
    width: 95%;
    height: 76px;
   
.container nav ul li font-size: 25px; width: fit-content; height: fit-content;
 .container nav ul li ul.sub-nav li
     font-size: 20px; 
     
 
 .container nav ul li:hover ul.sub-nav /* Drop down menu visibility */
    padding-left: 10%;
    padding-right: 40px;

 main h2
    padding-right: 2em;
    padding-left: 2em;


iframe
    width: 300px;
    height: 200px;
     margin-left: 50vw;
    transform: translate(-75%);



.fanartcolumn img
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;

【问题讨论】：

【参考方案1】：

您可以查看我在/* additions */ CSS 下所做的以下更改。我弯曲了你的#wrapper container 并给了它一个弯曲的方向。出于演示目的，我放入了虚拟图像以反映您的图像应该如何表现。然后我添加了另一个 div 来嵌套<h2>，以便它们在各自的图像下对齐。我注意到你有很多与 h2' 相关的填充，以试图对齐它们，我建议你稍微编辑一下，直到你在图像下得到你想要的结果。但这应该能让你继续前进。

.backgroundcolor /* To get that cream color background!*/
    background-color: #f8f8f8;


.backgroundcolor h1, .backgroundcolor hr
    margin-bottom: 90px;


.backgroundcolor ul
    padding-bottom: 70px;


.backgroundcolor a

    color: #987b74;


.video-trailer h1
    color: #987b74;

.video-trailer h2 a
    color: #987b74;

.video-trailer h2 a:hover
    color: #FACABC;


.video-trailer a
    color: #987b74;


.video-trailer
    background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8);
    margin-top: 170px;


/* Clear floats after image containers */
.fanartrow::after 
  content: "";
  clear: both;
  display: table;



.fanartrow
    padding-left: 500px;
    padding-right: 100px;


.fanartrow h2
    text-align: center;
    padding-right: 600px;
    padding-left: 200px;
    font-size: 125%;


.fanartcolumn 
  float: left;
  width: 33.33%;
  padding: 5px;


.fanartcolumn img
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;


/* additions */
#wrapper 
  display: flex;
  flex-direction: column;
  align-items: center;


.img-desc 
  display: flex;
  justify-content: space-around;



@media screen and (max-width: 640px)

    body, html
        overflow-x: hidden;
        padding: 0.8em 0;
        width: 100vw;
    
    .col-25, .col-75, input[type=submit] 
    width: 100%;
    margin-top: 0;
  
  .tabs
    flex-direction: column;
    align-items: center;
  
  h2font-size: 100%; 
  
   .title
        font-size: 25%;
   
   container 
   height: 180px;
   width: 100%;
   display: flex;
   align-items: center;
 
iframe
    width: 300px;
    height: 200px;
     margin-left: 50vw;
  transform: translate(-50%);


.fanartcolumn img
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;




@media (max-width: 1200px) 
    .container nav
    width: 95%;
    height: 76px;
   
.container nav ul li font-size: 25px; width: fit-content; height: fit-content;
 .container nav ul li ul.sub-nav li
     font-size: 20px; 
     
 
 .container nav ul li:hover ul.sub-nav /* Drop down menu visibility */
    padding-left: 10%;
    padding-right: 40px;

 main h2
    padding-right: 2em;
    padding-left: 2em;


iframe
    width: 300px;
    height: 200px;
     margin-left: 50vw;
    transform: translate(-75%);



.fanartcolumn img
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;

<!DOCTYPE html>
<html>
   <div id="wrapper">
      <title>HighItsKy</title>
      <link href="test.css" rel="stylesheet">
      <link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
      <link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <div class="backgroundcolor">
         <h1>Community</h1>
         <h2>One of the most remarkable things about my streaming experience is that I have grown a fantastic community and met some wonderful people;
            the "Kyngdom" is where we build each other up, share memes, play games, and talk. We love and only want the best for each other here!
         </h2>
      </div>
      <div class="video-trailer">
         <h1>GALLERY</h1>
         <div class="fanartrow">
            <div class="fanartcolumn">
               <img src="https://dummyimage.com/400x400/000/fff" >
            </div>
            <div class="fanartcolumn">
               <img src="https://dummyimage.com/400x400/000/fff" >
              <div class="img-desc"><h2>Left Image- Done by @Samzx_x on Twitch</h2><h2> Right Image- Done by @Vivkins on Twitch</h2></div>
            </div>

         </div>
         <div class="fanartrow">
            <div class="fanartcolumn">
               <img src="https://dummyimage.com/400x400/000/fff" >
            </div>
            <div class="fanartcolumn">
               <img src="https://dummyimage.com/400x400/000/fff" >
              <div class="img-desc"><h2>Both Images- Done by @This_Lettuce on Twitter</h2>
              </div>
            </div>
            
         </div>
         <div class="fanartrow">
            <div class="fanartcolumn">
               <img src="https://dummyimage.com/400x400/000/fff" >
            </div>
            <div class="fanartcolumn">
               <img src="https://dummyimage.com/400x400/000/fff" >
                        <div class="img-desc"><h2>Left Image- Done by @This_Lettuce on Twitter</h2><h2>Right Image- Done by @Derpy_Pandaa on Twitch</h2>
            </div>
            </div>

         </div>
      </div>
   </div>

【讨论】：

以上是关于尝试使用 div 排列六个图像的主要内容，如果未能解决你的问题，请参考以下文章

自动布局设置六个方形图像

如何在网格中布置图像？

在 ASP.NET 中的 DIV 内水平和垂直居中图像

我正在尝试使用 php 和 jquery.php 变量更改 div 的背景图像，但未获取值

DIV 容器内的 HTML 图像底部对齐

如何将图像适合 div？ [复制]