我想在游戲中創(chuàng)建一個列表項，該列表項具有背景、內(nèi)部帶有圖標(biāo)的圖標(biāo)持有者、標(biāo)題和描述以及最多三個資源。我正在使用 Bootstrap，并認(rèn)為使用內(nèi)部有一行的容器流體可能會起作用，但圖像放置在彼此下方（參見圖像）我不想使用諸如position:absolute之類的東西，或者將邊距設(shè)置為-250% 0 0 0之類的東西。有沒有一種方法可以說圖像應(yīng)該放置在彼此的頂部，而不是放置在彼此的下面？到目前為止，這是我的 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條經(jīng)驗 獲得超3個贊
您可以使用 CSS 網(wǎng)格布局，并將兩個圖像放在同一個單元格中。
查看這個 jsfiddle： https: //jsfiddle.net/dscmr7oz/。
另外，當(dāng)你說你不想使用像position:absolute"這樣的東西時，為什么會這樣呢？這是將東西放在彼此之上的完全合法的方式。你是否知道如果你放置一個絕對定位的元素在相對定位的元素內(nèi)部，內(nèi)部元素相對于其父元素是絕對定位的？
.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 關(guān)注
- 162 瀏覽
添加回答
舉報
0/150
提交
取消