我的任務是為新的客戶端測驗體驗構建一個相對簡單的模塊，但我覺得我可以優化代碼。重要提示：我無權訪問客戶的站點，我只是應該使用 HTML 和 CSS 操作來構建這個模塊。
目前，相關頁面包含一張卡片圖片，下面有一些文字。我必須介紹一個新的徽章影像，它位于卡片的右側。這是它的外觀：
這是我目前為該特定配置設定的代碼塊：
.Card_Badge {
box-sizing: border-box;
max-height: 350px;
overflow: hidden;
}<div class="Card_Badge">
<img alt="Badge Background" src="https://via.placeholder.com/100" style="max-width: 100px;max-height: 146px;display: flex;z-index: 1;">
<img alt="Secured Card" src="https://via.placeholder.com/100" style="transform: translate(65px,-150px);">
</div>沒有transform: translate()影像簡單地堆疊在一起。必須有一種更好的方法來實作影像彼此相鄰而不過度操縱定位的預期效果，對吧？也許有某種position:或display:組件，但我承認我仍然不是非常精通這些是如何作業的。
任何幫助將不勝感激。
更新：這是我擁有的調整后的代碼。我仍然遇到的唯一問題是卡片元素下方的陰影被剪裁到其中一個<div>容器的右側。不知道如何解決這個問題。
`
`uj5u.com熱心網友回復：
我認為您應該添加<div ></div>以對模型中的影像進行更多控制，不要讓它們沒有任何元素來控制它們。檢查下面的代碼
.Card_Badge {
box-sizing: border-box;
max-height: 350px;
overflow: hidden;
}
.image-container{
display:flex;
}<div class="Card_Badge">
<div class="image-container">
<img alt="Badge Background" src="https://via.placeholder.com/100" style="max-width: 100px;max-height: 146px;display: flex;z-index: 1;">
<img alt="Secured Card" src="https://via.placeholder.com/100" ">
</div>
</div>uj5u.com熱心網友回復：
在這里這應該可以正常作業，使用 gap 屬性來設定您希望元素之間的距離。
.Card_Badge {
box-sizing: border-box;
max-height: 350px;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
gap: 5em;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/523547.html
標籤：htmlcss图片css 选择器
下一篇：是否可以將徽標放在y軸上