时间戳

首页 > 解决方案 > 如何使这3张图片彼此相邻？

html - 如何使这3张图片彼此相邻？

问题描述

所以我想要 3 张图片，上面的文字居中，我设法使文字居中，但内联不起作用，我希望这些图片彼此相邻。它必须包含部分标签，因为我是为学校项目做的：v。

body {
    margin-left: 120px;
    width: 1240px;
    border: 1px solid black;
    padding: 2px;
   
  }
  div{
      margin-left:15px;
  }

  hr{
      margin-right:10px;
  }
  
  .section1 li{
      margin-left:35px;
  }

  .section2{
    width: 200px;
    display: inline-block;
    text-align: center;
  }

  .section2 img{
      display:block;
  }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>strona</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body">
      <div>
<h2>Biuro podróży GLOB</h2>
<img src="wide angle view.png"> 
    <h5>Pracujemy od poniedziałku do piątku w godz 10:00-18:00</h5>            
    <nav>
        <a href="cośtam"> Cośtam</a>
        <a href="cośtam>"> Cośtam</a>
    </nav> 
        <hr>
        <section class="section1">
            <h3>Zakres działania</h3>
            <ul>
                    <li>wycieczki</li>
                    <li>wczasy</li>
                    <li>biwaki</li>
                    <li>kuligi</li>
                    <li>narty</li>
            </ul>
            
        </section>
    <section class="section2">
    Summer
    <img src="https://content.thriveglobal.com/wp-content/uploads/2020/06/summer.jpg" alt="summer" width="220" height="220">
    Winter
    <img src="https://content.thriveglobal.com/wp-content/uploads/2020/06/summer.jpg" alt="summer" width="220" height="220">
    Fall
    <img src="https://content.thriveglobal.com/wp-content/uploads/2020/06/summer.jpg" alt="summer" width="220" height="220">

    </section>
    


    
</div>
  </body>
</html>

这是我希望它的样子：[1]：https ://i.stack.imgur.com/XuSde.png

标签： htmlcss

解决方案

那么重新排列你的 HTML 结构。您还可以使用网格并将该部分分成 3 列。

现在.section2用作跨越整个父母宽度的网格，并将其平均分为 3 列repeat(3, 1fr);。列用包含标题和图片的 div 包裹。图片 s 设置为object-fit: contain;以便它们调整大小以适应可用空间。

.section2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 15px;
}

.section2 div {
  object-fit: contain;
  text-align: center;
}

.section2 div img {
  width: 100%;
}
<section class="section2">
  <div>
    Summer
    <img src="https://content.thriveglobal.com/wp-content/uploads/2020/06/summer.jpg" alt="summer">
  </div>
  <div>
    Winter
    <img src="https://content.thriveglobal.com/wp-content/uploads/2020/06/summer.jpg" alt="summer">
  </div>
  <div>
    Fall
    <img src="https://content.thriveglobal.com/wp-content/uploads/2020/06/summer.jpg" alt="summer">
  </div>
</section>

推荐阅读