text-align和margin CSS属性没有响应

Question

.scss

<div class="playlist">
  <span class="span-icon"><ion-icon [name]="data.icon"></ion-icon></span>
  <span>{{data.text}}</span>
  <img [src]="data.imageUrl" [alt]="data.text" />
</div>

html的

icon

Out Put

现在我需要如下所示。请不要考虑不同的text类型和top right。我只需要这个。我需要一个响应bottom right和icon和text的{​​{1}}外观。我尝试使用text-align: right和margin属性。但是您知道这种方法在不同的视图端口上没有响应你能帮我解决这个问题吗？

Answer 1

将您的两个图标和范围文本放在absolute，然后根据需要使用CSS calc() function在图片上方的top-right和bottom-right处对齐它们。

.playlist {
  position: relative;
  display: inline-block;
  width: 240px;
  height: 200px;
  overflow: hidden;
}

.playlist img {
  width: 100%;
  height: 100%;
}

.playlist .span-icon {
  position: absolute;
  top: 5px;
  right: calc(100% - 98%);
  color: #fff;
}

.playlist .tm {
  position: absolute;
  bottom: 5px;
  right: calc(100% - 98%);
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="playlist">
  <span class="span-icon"><i class="fa fa-film"></i></span>
  <span class="tm">2:10</span>
  <img src="http://lorempixel.com/output/city-q-c-640-480-6.jpg">
</div>

Answer 2

<div class="playlist">
  <span class="span-icon"><ion-icon [name]="data.icon"></ion-icon></span>
  <span class="span-text">{{data.text}}</span>
  <img [src]="data.imageUrl" [alt]="data.text" />
</div>

CSS

.span-icon {
  position: absolute;
  top: 0; 
  right: 0;
}
.span-icon {
  position: absolute;
  bottom: 0; 
  right: 0;
}

您只需将图标设置为绝对，并将其与top，right对齐。 ...