Блог

Главная - Вопросы по программированию - Как сделать так, чтобы эти 3 картинки были рядом друг с другом?

Как сделать так, чтобы эти 3 картинки были рядом друг с другом?

#html #css

#HTML #css — код

Вопрос:

Итак, я хотел иметь 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

Ответ №1:

Что ж, тогда измените свою HTML-структуру заново. Вы также можете использовать сетку и разделить раздел на 3 столбца.

.section2 Теперь используется как сетка для охвата всей родительской ширины и равномерно разбивает ее на 3 столбца repeat(3, 1fr); . Столбцы обернуты div, который содержит заголовок и картинки. Для картинок задано значение 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>
Метки: