我是網(wǎng)絡(luò)開發(fā)新手，我正在嘗試制作一個網(wǎng)站，用于用 CSS、HTML5 對我的圖片進(jìn)行排序。我希望排序看起來像文本將圖像分開，就像一個新段落一樣。我嘗試添加看起來怎么樣<br />但這并沒有像我預(yù)期的那樣起作用。感謝我能得到的任何幫助:)#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貢獻(xiàn)1887條經(jīng)驗 獲得超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貢獻(xiàn)1825條經(jīng)驗 獲得超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 關(guān)注
- 187 瀏覽
添加回答
舉報
0/150
提交
取消