我是网络开发新手，我正在尝试制作一个网站，用于用 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>
2 回答
慕工程0101907
TA贡献1887条经验 获得超5个赞
那么您想要一张图像和其下方的文本，还是图像和旁边的文本？如果您想要一些图像，然后一些文本，那么将所有项目放入一个 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>
凤凰求蛊
TA贡献1825条经验 获得超4个赞
-您需要将所有项目放入一个 div 中，并使容器 div 随列方向弯曲。- ID 必须是 unic，因此您不能对 HTML 代码中的多个元素使用一个 id。
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>
- 2 回答
- 0 关注
- 102 浏览
添加回答
举报
0/150
提交
取消