所以我有一些下面有文字的圖像，我希望它們的大小相同。這很有效，但我也希望它們處于某種“光柵”狀態(tài)，而不是可見狀態(tài)。但他們在 1 線上。我什至不知道CSS是否正確。如果一旦有人捐贈，他們的圖像和名字會直接出現(xiàn)在網(wǎng)站上，那就太酷了，這可能很難。這樣圖像對齊對我來說就足夠了。CSS.col-md_staffblock{ margin: 30px auto; margin-bottom: 5px auto; padding: 10px 10px; }超文本標(biāo)記語言<h1 >DONATORS</h1> <p>Donations help us keep our servers online 24/7.</p> <div class="row stafflist"> <div class="col-md_staffblock"> <img width="100px;" src="img/JOSH_KING222.png"> <h2>JOSH_KING222</h2> <p>Donator</p> </div> <div class="col-md_staffblock"> <img width="100px;" src="img/BuddySven.png"> <h2>BuddySven</h2> <p>Donator</p> </div> <div class="col-md_staffblock"> <img width="100px;" src="img/AllexX.png"> <h2>AllexX</h2> <p>Donator</p> </div> <div class="col-md_staffblock"> <img width="100px;" src="img/fond99.png"> <h2>fond99</h2> <p>Donator</p> </div> <div class="col-md_staffblock"> <img width="100px;" src="img/II_Sebs.png"> <h2>II_Sebs</h2> <p>Donator</p> </div> <div class="col-md_staffblock"> <img width="100px;" src="img/obesemessFTW69.png"> <h2>obesemessFTW69</h2> <p>Donator</p> </div> <div class="col-md_staffblock"> <img width="100px;" src="img/DcemilO.png"> <h2>DcemilO</h2> <p>Donator</p> </div> <div class="col-md_staffblock"> <img width="100px;" src="img/sonicboom62798.png"> <h2>sonicboom62798</h2> <p>Donator</p> </div> </div>這個 html 對于每個圖像都是相同的。
2 回答
嗶嗶one
TA貢獻(xiàn)1854條經(jīng)驗 獲得超8個贊
據(jù)我了解你的問題，我的解決方案是這樣的：-
HTML我更改了您的圖像，以便可以進行預(yù)覽，如果您愿意，您可以使用默認(rèn)圖像
<h1 >DONATORS</h1>
<p>Donations help us keep our servers online 24/7.</p>
<div class="row stafflist">
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>JOSH_KING222</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>BuddySven</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>AllexX</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>fond99</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>II_Sebs</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>obesemessFTW69</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>DcemilO</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>sonicboom62798</h2>
<p>Donator</p>
</div>
</div>
普通的CSS
.stafflist {
display: flex;
}
.col-md_staffblock {
margin: 10px
}
h2 {
font-size: 12px
}
使用CSS3 grids只需將數(shù)字 8 更改為您想要的任何數(shù)字，您就會得到 X 列的網(wǎng)格
.stafflist {
display: grid;
grid-template-columns: repeat(8, 1fr) ;
}
希望這可以幫助
30秒到達(dá)戰(zhàn)場
TA貢獻(xiàn)1828條經(jīng)驗 獲得超6個贊
您可以為您的類 .stafflist 使用 css 網(wǎng)格，如下所示，您正在修復(fù)您的 div 以顯示分布在頁面上的 8 列
.stafflist {
? display: grid;
? grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
}
- 2 回答
- 0 關(guān)注
- 115 瀏覽
添加回答
舉報
0/150
提交
取消