Bootstrap：在同一行上创建图像

Question

我想在游戏中创建一个列表项，该列表项具有背景、内部带有图标的图标持有者、标题和描述以及最多三个资源。我正在使用 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>

Answer 1

您可以使用 CSS 网格布局，并将两个图像放在同一个单元格中。查看这个 jsfiddle： https:&nbsp;//jsfiddle.net/dscmr7oz/。另外，当你说你不想使用像position:absolute"这样的东西时，为什么会这样呢？这是将东西放在彼此之上的完全合法的方式。你是否知道如果你放置一个绝对定位的元素在相对定位的元素内部，内部元素相对于其父元素是绝对定位的？.container {&nbsp; &nbsp; position: relative;}.container .bottom-image {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; z-index: 1;{.container .top-image {&nbsp; position: absolute;&nbsp; top: 20px;&nbsp; left: 20px;&nbsp; z-index: 2}