我有一些鏈接到各自網站的圖像，但是當我嘗試將它們放入網格中時，它們只是堆疊在一起。我將它們包裹在一個div中，并將每張圖片、描述和價格包裹在自己的div中，這樣每個網格塊都可以組織圖片、它的名稱和它的價格。.apparel { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1em;}.shirt-name { font-weight: 600;}.price { font-weight: 500;}.shirt-pic img { width: 100%; height: auto;}<div class="apparel"> <div id="original" class="left-side"> <a class="shirt-pic" href="pages/original.html"><img src="images/original.png" alt="Shirt 1" /></a> <span class="shirt-name helvetica size-s capitalized">Original</span> <span class="price helvetica size-s">$20.00</span> </div> <div id="design1" class="right-side"> <a class="shirt-pic" href="pages/design1.html"><img src="images/design1.png" alt="Shirt 2" /></a> <span class="shirt-name helvetica size-s capitalized">Design 1</span> <span class="price helvetica size-s">$30.00</span> </div> <div id="design2" class="left-side"> <a class="shirt-pic" href="pages/design2.html"><img src="images/design2.png" alt="Design 2" /></a> <span class="shirt-name helvetica size-s capitalized">Design 2</span> <span class="price helvetica size-s">$30.00</span> </div> <div id="tri-tone" class="right-side"> <a class="shirt-pic" href="pages/tri-tone.html"><img src="images/tri-tone.png" alt="Tri Tone" /></a> <span class="shirt-name helvetica size-s capitalized">Tri-Tone</span> <span class="price helvetica size-s">$40.00</span> </div></div>如果我使用 span 而不是 div，網格也可以工作嗎？我如何確保價格和名稱位于圖片下方的中心？
2 回答
尚方寶劍之說
TA貢獻1788條經驗 獲得超4個贊
僅用于flex中心：
.apparel {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
text-align: center;
}
.shirt-name {
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
}
.price {
font-weight: 500;
}
.shirt-pic img {
width: 50px;
height: 50px;
}
<div class="apparel">
<div id="original" class="left-side">
<a class="shirt-pic" href="pages/original.html"><img src="http://placekitten.com/301/301" alt="Shirt 1" /></a>
<span class="shirt-name helvetica size-s capitalized">Original</span>
<span class="price helvetica size-s">$20.00</span>
</div>
<div id="design1" class="right-side">
<a class="shirt-pic" href="pages/design1.html"><img src="http://placekitten.com/301/301" alt="Shirt 2" /></a>
<span class="shirt-name helvetica size-s capitalized">Design 1</span>
<span class="price helvetica size-s">$30.00</span>
</div>
<div id="design2" class="left-side">
<a class="shirt-pic" href="pages/design2.html"><img src="http://placekitten.com/301/301" alt="Design 2" /></a>
<span class="shirt-name helvetica size-s capitalized">Design 2</span>
<span class="price helvetica size-s">$30.00</span>
</div>
<div id="tri-tone" class="right-side">
<a class="shirt-pic" href="pages/tri-tone.html"><img src="http://placekitten.com/301/301" alt="Tri Tone" /></a>
<span class="shirt-name helvetica size-s capitalized">Tri-Tone</span>
<span class="price helvetica size-s">$40.00</span>
</div>
</div>
BIG陽
TA貢獻1859條經驗 獲得超6個贊
這只是另一種制作垂直方向的方法：
.shirt-name?{
??font-weight:?600;
??display:?block;????
}由于span是內聯元素，因此您需要進行設置display: block以確保下一個元素位于下一行。
- 2 回答
- 0 關注
- 174 瀏覽
添加回答
舉報
0/150
提交
取消