如何在图像的侧面放置文本？

Question

我的代码如下：

.img-container{
  overflow: hidden;
  border-radius: 4px;
}
    
.img-container img{
  -webkit-transition: -webkit-transform 1.2s ease;
  transition: transform 1.2s ease;
 }
    
 .img-container:hover img{
   -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

<div class="col-12 col-md-6 col-lg-8">
      <div class="mb-3 mb-md-0">
    
        <div class="img-container">
          <a href="index.php?post=#"><img  style="float: right; width: 400px" src="https://www.revistaplaneta.com.br/wp-content/uploads/sites/3/2017/05/5_pl530_volta8.jpg" alt="#" class="card-img-top"></a>
        </div>
    
        <div class="card-body">
          <h3 class="cardTitleID"><a href="index.php?post=#" class="card-title">title</a></h3>
          <p class="card-text text-muted">text</p>
        </div>
        
      </div>
    </div>

我需要将<img>浮动到右侧，但是overflow: hidden;上的css不允许我这样做...

我该如何解决？？

Answer 1

您的.img-container是一个DIV，如果您没有其他说明，它将扩展为100％的宽度。添加float: right，它将仅占用其包装图像的宽度。

.img-container{
  overflow: hidden;
  border-radius: 4px;
  float:right;
}
    
.img-container img{
  -webkit-transition: -webkit-transform 1.2s ease;
  transition: transform 1.2s ease;
 }
    
 .img-container:hover img{
   -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

<div class="col-12 col-md-6 col-lg-8">
      <div class="mb-3 mb-md-0">
    
        <div class="img-container">
          <a href="index.php?post=#"><img  style="float: right; width: 400px" src="https://www.revistaplaneta.com.br/wp-content/uploads/sites/3/2017/05/5_pl530_volta8.jpg" alt="#" class="card-img-top"></a>
        </div>
    
        <div class="card-body">
          <h3 class="cardTitleID"><a href="index.php?post=#" class="card-title">title</a></h3>
          <p class="card-text text-muted">text</p>
        </div>
        
      </div>
    </div>

Answer 2

有多种方法可以实现此目的，但我个人更喜欢使用flex方法：

div.mb-3 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
}

.img-container{
  overflow: hidden;
  border-radius: 4px;
}
    
.img-container img{
  -webkit-transition: -webkit-transform 1.2s ease;
  transition: transform 1.2s ease;
 }
    
 .img-container:hover img{
   -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

<div class="col-12 col-md-6 col-lg-8">
      <div class="mb-3 mb-md-0">
    
        <div class="img-container">
          <a href="index.php?post=#"><img  style="float: right; width: 400px" src="https://www.revistaplaneta.com.br/wp-content/uploads/sites/3/2017/05/5_pl530_volta8.jpg" alt="#" class="card-img-top"></a>
        </div>
    
        <div class="card-body">
          <h3 class="cardTitleID"><a href="index.php?post=#" class="card-title">title</a></h3>
          <p class="card-text text-muted">text</p>
        </div>
        
      </div>
    </div>

Answer 3

代替使您的<img>浮动，只需在具有“ img-container”和“ card-body”类的div上声明style="display:inline-block;"