我想在 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}}
最佳答案
如果 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;
}
关于html - 如何将图像放在 div 的内容上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43086565/