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;
}

Answer 2

将以下内容添加到.imgCadenas类

print tree.xpath(path)[0].text

Answer 3

我会按如下方式编辑div的位置，并确保父div也有一个设置位置，例如位置：相对;

.imgCadenas{          
   position: absolute;
   top: 4px;
   right: 4px;
 }

Answer 4

使用float并保持位置相对于图像将解决问题。

＆＃13;

img {
  postion: relative;
  float: right;
}

＆＃13;

<div class="nav">
  <ul>
    <li id="hello">
      <a href="home.php"><img src="http://zdnet3.cbsistatic.com/hub/i/2015/09/01/cb834e24-18e7-4f0a-a9bf-4c2917187d3f/83bb139aac01023dbf3e55a3d1789ad8/google-new-logo.png"></a>
    </li>
  </ul>
</div>

＆＃13;

Answer 5

将此内容添加到CSS类中：

.imgCadenas{
  z-index:5;
  position: absolute;
  right:/*some px/vw from the right side*/;
  top:/*some spx/vh from the top*/;
  bottom:/*same as above if vertically centered*/;
  left:auto;
  width:auto;
  height:auto;
}

.liMachine{
  position: relative;
}

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

5 个答案: