HTML CSS卡资格

Question

我需要在卡的右侧显示图像，我该怎么做？不在左边距处，因为如果标题大小更大，则图像将在下一行显示

<div class="block_container1">
  <div  class="tit" *ngFor="let c of cdata">{{c.name}}</div>
  <div  style="text-align: right;"><img  src="assets/imgs/32.png"></div>
</div>

.block_container1 > div {
    display: inline-block;
    vertical-align: middle;
}

Answer 1

可以使用CSS属性<div>将包含<img>元素的float: right;元素设置为向右浮动。请记住清除下一个float元素的<div>属性。为正确对齐，请为您的line-height元素使用<div>

下面是一个有效的代码段：

.block_container1>div {
  display: inline-block;
  vertical-align: middle;
}

.tit {
  line-height: 38px
}

.myImg {
  float: right;
  line-height: 38px
}

<div class="block_container1">
  <div class="tit" *ngFor="let c of cdata">hello</div>
  <div class="myImg"><img src="https://www.w3schools.com/tags/smiley.gif"></div>
</div>

Answer 2

一种方法是将图像设置为block_container1类的背景，将背景位置标记为“右上”，并确保其不会重复：

.example { 
  min-height:500px;
  background-image:url('https://cdn3.iconfinder.com/data/icons/fabric-features-clothes-materials-glyph/64/41_design-sample-color-palette-128.png'); 
  background-repeat:no-repeat;
  background-position:top right;
  margin:40px;
  }

<div class="example">

  <h2>Example</h2>
  
  This is an example.
  
</div>

您可以通过为.block_container1留出空白来在图像周围添加填充。您可以learn more about background positions here。

Answer 3

尝试flexbox方法：

.block_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

<div class="block_container1">
  <div  class="tit" *ngFor="let c of cdata">{{c.name}}</div>
  <div  style="text-align: right;"><img  src="assets/imgs/32.png"></div>
</div>