如何在 CSS 中对齐图片框答案

【问题标题】：How to align Picture boxes in CSS如何在 CSS 中对齐图片框
【发布时间】：2020-08-28 09:29:15
【问题描述】：

我是一个新人，我们学习了 HTML 和 CSS 以及一些 javascript。现在我正在开发一个项目，该项目显示来自某些 API 的当前最新消息。 API 和 Javascript 获取部分由我团队中的一位资深人士完成。我的工作是将所有内容都放在一个漂亮的 UI 中。

（在 w3schools 的帮助下）我已经设法按照我想要的方式放置它，如下所示。我的问题是，在某些屏幕上它不合适，因此有空白点，每件东西都错位和凌乱。任何人都可以帮助我提供任何有用的建议吗？

下面是我开发的图片以及我的问题所在。代码如下。谢谢！

Link to Image

div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
    border: 1px solid #777;
  }
  
  div.gallery img {
    width: 100%;
    height: auto; 
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
  }
  
  @media only screen and (max-width: 700px) {
    .responsive {
      width: 49.99999%;
      margin: 6px 0;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .responsive {
      width: 100%;
    }
  }
  
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }

HTML 代码如下。这是循环内 Javascript 中使用的基本格式，通过该循环显示每条新闻。

<div class="responsive">
    <div class="gallery">
       <img src={Image link here} alt="Link broken" width="600" height="400" />
           <div class="desc">
               {Post details here}
           </div>
     </div>
</div>

【问题讨论】：

嗨！您应该为该布局使用 css grid。这里w3schools.com/css/css_grid.asp
云你请附上html代码或codepen demo。？
@DebsmitaPaul 感谢您的快速回复！我最初尝试了网格，但它没有用。还有其他解决方法吗？
@RubixOverflow 我已经添加了 HTML 代码！请立即检查。

标签： html css formatting alignment

【解决方案1】：

请试试这个，

我使用grid 方法来对齐它。以及用于在特定设备中进行响应的媒体查询。

.responsive {
  padding: 10px 6px;
  width:100%;
  display: grid;
  grid-template-columns: auto auto auto auto;
}
@media only screen and (max-width: 1200px){
  .responsive {grid-template-columns: auto auto auto;}
}
@media only screen and (max-width: 768px){
  .responsive {grid-template-columns: auto auto;}
}
@media only screen and (max-width: 576px) {
  .responsive {grid-template-columns: auto;}
}

div.gallery {
  border: 1px solid #ccc;
  margin:10px;
}
div.gallery:hover {
   border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto; 
}
div.desc {
  padding: 15px;
  text-align: center;
}
.responsive {
  padding: 10px 6px;
  width:100%;
  display: grid;
  grid-template-columns: auto auto auto auto;
}
@media only screen and (max-width: 1200px){
  .responsive {grid-template-columns: auto auto auto;}
}
@media only screen and (max-width: 768px){
  .responsive {grid-template-columns: auto auto;}
}
@media only screen and (max-width: 576px) {
  .responsive {grid-template-columns: auto;}
}

<div class="responsive">
  <div class="gallery">
     <img src=https://i.stack.imgur.com/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">1</div>
   </div>
   <div class="gallery">
     <img src=https://i.stack.imgur.com/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">2</div>
   </div>
   <div class="gallery">
     <img src=https://i.stack.imgur.com/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">3</div>
   </div>
   <div class="gallery">
     <img src=https://i.stack.imgur.com/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">4</div>
   </div>
   <div class="gallery">
     <img src=https://i.stack.imgur.com/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">5</div>
   </div>
   <div class="gallery">
     <img src=https://i.stack.imgur.com/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">6</div>
   </div>
   <div class="gallery">
     <img src=https://i.stack.imgur.com/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">7</div>
   </div>
   <div class="gallery">
     <img src=https://i.stack.imgur.com/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">8</div>
   </div>
        <div class="gallery">
     <img src=https://i.stack.imgur.com/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">9</div>
   </div>
</div>

【讨论】：