我想在游戲中創建一個列表項，該列表項具有背景、內部帶有圖標的圖標持有者、標題和描述以及最多三個資源。我正在使用 Bootstrap，并認為使用內部有一行的容器流體可能會起作用，但圖像放置在彼此下方（參見圖像）我不想使用諸如position:absolute之類的東西，或者將邊距設置為-250% 0 0 0之類的東西。有沒有一種方法可以說圖像應該放置在彼此的頂部，而不是放置在彼此的下面？到目前為止，這是我的 HTML 代碼：.resourceHolder{ position: relative;}.resourceIcon{ position: relative;}.nopadding { padding: 0 !important; margin: 0 !important;}.iconHolder{ position: relative; width: 100%;}.icon{ position: relative; width: 65%;}.bannerText{ font-family: FenwickWood; color: #0062cc; margin: 0 0 20% 0; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: beige; pointer-events: none;}<div class="container-fluid"> <img class="background" src="assets/UI/window/wood_plank1.svg"> <div class="row"> <div class="col-sm-3 nopadding"> <img class="iconHolder" src="assets/UI/window/grid4L.svg"> <img class="icon" src="assets/Terrain_Medieval/Decor/villageSmall03.png"> </div> <div class="col-sm-3 nopadding"> <h1 class="bannerText">Village</h1> </div> <div class="col-sm-2 nopadding"> <img class="resourceHolder" src="assets/UI/window/grid4L.svg"> <img class="resourceIcon" src="assets/Icons/gold_coins.png"> </div> </div></div>
1 回答
翻過高山走不出你
TA貢獻1875條經驗 獲得超3個贊
您可以使用 CSS 網格布局，并將兩個圖像放在同一個單元格中。
查看這個 jsfiddle： https: //jsfiddle.net/dscmr7oz/。
另外，當你說你不想使用像position:absolute"這樣的東西時，為什么會這樣呢？這是將東西放在彼此之上的完全合法的方式。你是否知道如果你放置一個絕對定位的元素在相對定位的元素內部，內部元素相對于其父元素是絕對定位的？
.container {
position: relative;
}
.container .bottom-image {
position: absolute;
top: 0;
left: 0;
z-index: 1;
{
.container .top-image {
position: absolute;
top: 20px;
left: 20px;
z-index: 2
}
- 1 回答
- 0 關注
- 148 瀏覽
添加回答
舉報
0/150
提交
取消