Блог

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

Как я могу сделать так, чтобы текст отображался непосредственно под изображениями, организованными в сетке 2×2?

#html #css

#HTML #css

Вопрос:

Я пытаюсь заставить текст отображаться непосредственно под каждым изображением, организованным в сетке 2×2. Кажется, я не могу этого понять. Я понимаю, что написание тега p прямо под изображениями не влияет на его положение на веб-странице, поэтому я предполагаю, что это как-то связано с отображением или положением, но я пробовал много разных итераций, и ни одна из них, похоже, не помогает. Любая помощь приветствуется! Спасибо!

 ``

.main {
  font-family: fantasy;
  color: white;
}

.main .browse {
  background-color: wheat;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  padding-top: 20px;
}

.main img {
  display: inline-block;
  width: 50%;
  float: left;
  padding: 20px 20px;
  background-color: pink;
}

.row-1 {
  color: black;
} 
     <section class="main">
        <h2 class="browse">Browse</h2>
        <div class="row-1">
            <img src="./images/macaroon.jpg">
            <p>Category 1</p>
            <img  src="./images/macaroon.jpg">
            <p>Category 2</p>
        </div>
        <div class="row-2">
            <img src="./images/macaroon.jpg">
            <p>Category 3</p>
            <img src="./images/macaroon.jpg">
            <p>Category 4</p>
        </div>
    </section>

Ответ №1:

Использовать width: fit-content; для всех p тегов.

 ``

.main {
  font-family: fantasy;
  color: white;
}

.main .browse {
  background-color: wheat;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  padding-top: 20px;
}

.main img {
  display: inline-block;
  width: 50%;
  float: left;
  padding: 20px 20px;
  background-color: pink;
}
.main p{
  width:fit-content;
}
.row-1 {
  color: black;
} 
 <section class="main">
        <h2 class="browse">Browse</h2>
        <div class="row-1">
            <img src="./images/macaroon.jpg">
            <p>Category 1</p>
            <img  src="./images/macaroon.jpg">
            <p>Category 2</p>
        </div>
        <div class="row-2">
            <img src="./images/macaroon.jpg">
            <p>Category 3</p>
            <img src="./images/macaroon.jpg">
            <p>Category 4</p>
        </div>
    </section>

Комментарии:

1. Хорошо, это позволило первым двум тегам p попасть под первые два — за исключением того, что теперь это изменило расположение изображений, и они отображаются в одном столбце.

Ответ №2:

Правильным элементом html для использования здесь является figure элемент, который имеет img и figcaption элемент (taht может быть первым или последним дочерним элементом элемента figure и может быть оформлен по желанию.

Текст подписи к рисунку может быть стилизован и семантически связан с img, чтобы он имел больше смысла, а также был стилистически связан с элементом img.

 .main {
  font-family: fantasy;
  color: white;
}

.browse {
  background-color: wheat;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  padding-top: 20px;
}

.row {
display: flex;
width: 100%;
}

figure {
  flex-grow: 1;
  padding: 20px 20px;
  background-color: pink;
  text-align: center
}

figcaption {
  margin-top: 10px;
}

.row-1 {
  color: black;
} 
 <section class="main">
        <h2 class="browse">Browse</h2>
        <div class="row row-1">
          <figure>
            <img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" width="150">
            <figcaption>Category 1</figcaption>
          </figure>
         <figure>
            <img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" width="150">
            <figcaption>Category 2</figcaption>
          </figure>
        </div>
        <div class="row row-2">
          <figure>
            <img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg"width="150">
            <figcaption>Category 3</figcaption>
          </figure>
         <figure>
            <img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg"width="150">
            <figcaption>Category 4</figcaption>
          </figure>
        </div>
    </section>
Метки: