我想顯示一個影像和它下面的兩個按鈕,影像尺寸可能變化很大,所以我將 max-width 設定為 60%,將 max-height 設定為 80%,但我不確定如何將下面的這兩個按鈕設定為在影像下正確對齊,左按鈕浮動在左側,右側在 .buttons div 的右側,并且 .buttons div 應該是影像的確切寬度。
這是我的 HTML:
<div class='content'>
<img class='nft'>
<div class='buttons'>
<button class='buy'>Buy</button>
<button class='share'>Share</button>
</div>
</div>
CSS看起來像這樣:
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.nft {
max-width: 60%;
max-height: 80%;
display: block;
margin: auto;
margin-bottom: 32px;
}
.buy {
float: left;
}
.share {
float: right;
}
uj5u.com熱心網友回復:
目前尚不清楚您是否希望按鈕擴展到每個按鈕上方影像寬度的一半。不過,那是我的看法,所以這里有一個示例,顯示按鈕以不同的影像寬度填充空間:
.content {
display: inline-flex;
flex-direction: column;
}
.buttons {
display: flex;
}
.buttons>button {
flex: 1;
}
<div class='content'>
<img src='http://placekitten.com/400/200' class='nft'>
<div class='buttons'>
<button class='buy'>Buy</button>
<button class='share'>Share</button>
</div>
</div>
<div class='content'>
<img src='http://placekitten.com/200/200' class='nft'>
<div class='buttons'>
<button class='buy'>Buy</button>
<button class='share'>Share</button>
</div>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/396343.html
下一篇:左右對齊