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: //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

}