Мне нужна помощь, чтобы правильно отсортировать мои изображения в CSS, HTML

Question

Я новичок в веб-разработке и пытаюсь создать сайт для сортировки моих фотографий в CSS, HTML5. То, что я хочу, чтобы сортировка выглядела как текст, разделяет изображения как новый абзац. как это выглядит Я пытался добавить

<br />

, но это не сработало, как я ожидал. Спасибо за любую помощь, которую я могу получить:)

#pics {
  margin-top: 10px;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.pics-text {
  font-family: 'Roboto', sans-serif;
  font-size: 36px;
  color: #ffffff;
  opacity: 87%;
}

.pic-item {
  float: left;
  position: relative;
  width: 20%;
  padding-top: 5px;
  padding-right: 7px;
}

.pic-item a img {
  width: 100%;
  border-radius: 5px;
}

<div id="pics">

  <h2 class="pics-text">some text</h2>

  <div class="pic-item">
    <a href="#"><img src="./imgs/123-vertical/1.jpg" /></a>
  </div>

  <div class="pic-item">
    <a href="#"><img src="./imgs/123-vertical/2.jpg" /></a>
  </div>

  <div class="pic-item">
    <a href="#"><img src="./imgs/123-vertical/3.jpg" /></a>
  </div>

</div>
<div id="pics">

  <h2 class="pics-text">some text</h2>

  <div class="pic-item">
    <a href="#"><img src="./imgs/123-vertical/1.jpg" /></a>
  </div>

  <div class="pic-item">
    <a href="#"><img src="./imgs/123-vertical/2.jpg" /></a>
  </div>

  <div class="pic-item">
    <a href="#"><img src="./imgs/123-vertical/3.jpg" /></a>
  </div>

</div>

Answer 1

То есть вы хотите одно изображение и текст под ним или изображение и текст рядом? Если вы хотите какое-то изображение, а затем текст, поместите все ваши элементы в div и сделайте контейнер div с указанием направления: column.

.first{
  display: flex;
  flex-direction:row;
}
img{
  width: 50%
}

, а HTML будет

<h1>Some Text</h1>
<div class="first">
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
</div>
<h1>Some Text</h1>
<div class="first">
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
</div>

Answer 2

-Вы должны поместить все свои элементы в div и заставить ваш контейнер div сгибаться в направлении столбца. - Идентификаторы должны быть uni c, поэтому вы не можете использовать один идентификатор для нескольких элементов в вашем HTML коде.

body{
  background-color:red;
}
.container{
  display:flex;
  flex-direction:column;
}
#first, #second{
    margin-top: 10px;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.pics-text{
    font-family: 'Roboto', sans-serif;
  display:flex;
    font-size: 36px;
    color: #ffffff;
    opacity: 87%;
}

.pic-item { 
    float: left;
    position: relative;
    width: 20%;
    padding-top: 5px;
    padding-right: 7px;
}

.pic-item a img {
    width: 100%;
    border-radius: 5px;
}

<div class="container">
<div id="first">

        <h2 class="pics-text">some text</h2>

        <div class="pic-item">
            <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>
        </div>

        <div class="pic-item">
            <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>
        </div>

        <div class="pic-item">
            <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>
        </div>

    </div>

    <div id="second">

        <h2 class="pics-text">some text</h2>

        <div class="pic-item">
            <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>
        </div>

        <div class="pic-item">
            <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>
        </div>

        <div class="pic-item">
            <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>
        </div>

    </div>
  </div>