Не знаю почему, меня картинки выстраиваютсья по вертикали, а надо по горизонтали

Question

body {
  padding: 0 20px;
  font-family: "Muller", "Arial",sans-serif;
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(235, 235, 235);
}

a {
  color: rgb(0, 0, 0);
}

img {
  border: 0.5px solid orangered;
}

header {
  color: white;
  text-align: center;
  padding: 20px;
  margin-bottom: 50px;
  border-bottom: 5px solid rgb(255, 68, 0);
  background-image: url(img/art2.jpg);
}

<!DOCTYPE html>
<html>
  <head>
    <title>Художнє портфоліо</title>
    <meta charset="UTF-8" />
    <link href="stile.css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <h1>Моє художнє портфоліо</h1>
    </header>
    <main>
      <!-- Початок зображень робіт -->
      <!-- Перша картинка -->
      <figure class="camp">
        <img
          class="flower"
          src="img/flower.jpg"
          alt="Квіткова композиція"
          width="300"
        />
        <!-- Посилання на першу картинку -->
        <a href="flower.html"><figcaption>Квіткова композиція</figcaption></a>
      </figure>
      <!-- Друга картинка -->
      <figure class="green">
        <img
          class="plant"
          src="img/green.jpg"
          alt="Листок кабачка"
          width="300"
        />
        <!-- Посилання на другу картинку -->
        <a href="green.html"><figcaption>Листок кабачка</figcaption></a>
      </figure>
      <!-- Третя картинка -->
      <figure class="house">
        <img src="img/house.jpg" alt="Будинок у лісі" width="300" />
        <!-- Посилання на третю картинку -->
        <a href="house.html"><figcaption>Будинок у лісі</figcaption></a>
      </figure>
      <!-- Кінець зображень робіт -->
    </main>
  </body>
</html>

Answer 1

Элементы figure относятся к основному потому (блочный элемент) и поэтому растягиваются на всю ширину. Чтобы они шли друг за другом, надо изменить формат отображения. К примеру прописать строчный стиль:

figure {
    display: inline-block
}

БЛОГ НА HUSL

Не знаю почему, меня картинки выстраиваютсья по вертикали, а надо по горизонтали

Ответы (1 шт):