html - 如何将图像放在 div 的内容上？

Question

我想在 div 的右侧显示我的储物柜图像，但保留 div 的大小和格式。

这是默认状态:

这就是我现在锁定时发生的情况:

我想做这样的事情:

为此，我制作了这个 css:

.imgCadenas{
  width:  100px;
  height: 100px;
  background: url('/cadenas.png');
  text-align: right;
  background-repeat: no-repeat;
  background-size: 100%;
}

HTML 并不特别，但我把它放在:

<template name="machine">
    <li class="liMachine switch">
        <div id="nameMachine">
            <h3>{{nameMachine}}</h3>
        </div>
        <div id="stateMachine">
            State:<span class="state">{{stateMachine}}</span>
        </div>
        {{#if isLocked}}
        <div>
          <img class="imgCadenas">
        </div>
        {{else}}
          {{#if hideStopM}}
            {{else}}
              {{#if is_running_machine}}<i class="fa fa-spinner fa-spin"></i>
            {{else}}<button type="button" class="stop {{#if to_hide_stopM}}hidden{{/if}}"></button>
            {{/if}}
          {{/if}}

          {{#if hideKillM}}
          {{else}}
            {{#if is_alive_machine}}<i class="fa fa-spinner fa-spin"></i>
              {{else}}<button type="button" class="kill {{#if to_hide_stopM}}hidden{{/if}}"></button>
            {{/if}}
          {{/if}}

          {{#if is_stopped_machine}}<i class="fa fa-spinner fa-spin"></i>{{else}}<button type="button" class="start {{#if to_hide_startM}}hidden{{/if}}"></button>{{/if}}
        {{/if}}
    </li>
</template>

我正在处理的部分是 {{#if isLocked}}

当我使用 float:right 时，我有:

当我使用设置position: absolute;top:0px..的解决方案时:

当我使用@this.believer 的解决方案时:

Answer 1

如果 li 是相对的，则定义位置

.liMachine{
  list-style:none;
  position:relative;  
}

和图片

.imgCadenas{
  width:  100px;
  height: 100px;
  background: url('/cadenas.png');
  text-align: right;
  background-repeat: no-repeat;
  background-size: 100%;
/* Add following css */
position:absolute;
  top:0px;
  right:0px;
}