我需要帮助在 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{&nbsp; display: flex;&nbsp; flex-direction:row;}img{&nbsp; width: 50%}HTML 将是<h1>Some Text</h1><div class="first">&nbsp; <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>&nbsp; <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>&nbsp; <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">&nbsp; <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>&nbsp; <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>&nbsp; <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/></div>

Answer 2

-您需要将所有项目放入一个 div 中，并使容器 div 随列方向弯曲。- ID 必须是 unic，因此您不能对 HTML 代码中的多个元素使用一个 id。body{&nbsp; background-color:red;}.container{&nbsp; display:flex;&nbsp; flex-direction:column;}#first, #second{&nbsp; &nbsp; margin-top: 10px;&nbsp; &nbsp; max-width: 1500px;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: auto;}.pics-text{&nbsp; &nbsp; font-family: 'Roboto', sans-serif;&nbsp; display:flex;&nbsp; &nbsp; font-size: 36px;&nbsp; &nbsp; color: #ffffff;&nbsp; &nbsp; opacity: 87%;}.pic-item {&nbsp;&nbsp; &nbsp; float: left;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 20%;&nbsp; &nbsp; padding-top: 5px;&nbsp; &nbsp; padding-right: 7px;}.pic-item a img {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; border-radius: 5px;}<div class="container"><div id="first">&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="pics-text">some text</h2>&nbsp; &nbsp; &nbsp; &nbsp; <div class="pic-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="pic-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="pic-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="second">&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="pics-text">some text</h2>&nbsp; &nbsp; &nbsp; &nbsp; <div class="pic-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="pic-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="pic-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#"><img src="https://images.redbullshop.com/is/image/RedBullSalzburg/RB-product-detail/RBS19168_3H_1/RBS-Champions-League-Ball.jpg" /></a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp;