如何将文字放在图片的一侧？

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> 浮动到右侧，但是 css 上的 overflow: hidden; 不让我这样做...

我该如何解决这个问题？？

Answer 1

而不是让你的 <img> 浮动，只需在你的 div 上声明 style="display:inline-block;"，它有类 "img-container" 和 "card-body"

Answer 2

您的 .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 3

有多种方法可以实现这一点，但我个人更喜欢 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>

如何将文字放在图片的一侧？

How to put a text on the side of a image?

css

overflow

css-float