html - 如何将文本放在图像的右侧？

Question

这意味着在图像内部但在右侧部分。图像出现在屏幕上。文本应该在正确的部分。

到目前为止我的代码是这样的:

.banner{
   width:100%;
   background-image: url(../img/kepmerli2.jpg); 
   background-repeat: no-repeat;
   background-size: 100%; 
   background-position: 65% 35% ;   
   padding-top: 200px;

}

.herotext{
    bottom: 20px;
    font-family: 'museo_slab500';
    font-size: 150%;
    color: #fff;
    padding: 0 20px;
    width: 40%;
    line-height: 150%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7); 
}

<div class=" continer banner">
   <div class="herotext">
      <h3 >Marine Vila</h3>
      <p>This is Kep Merli Marine Villa, </br>  a living space redeffing design tandarts in Albania </p> 
   </div> 
</div>

Answer 1

将 text-align: right; 添加到 .banner

.banner{
    width:100%;

   background-image: url(../img/kepmerli2.jpg); 
   background-repeat: no-repeat;
   background-size: 100%; 
   background-position: 65% 35% ;   
   padding-top: 200px;
   text-align:right;

}

.herotext{

 
    bottom: 20px;
    font-family: 'museo_slab500';
    font-size: 150%;
    color: #fff;
    padding: 0 20px;
    width: 40%;
    line-height: 150%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7); 
    

}

<div class=" continer banner">
   <div class="herotext"> 

      <h3 >Marine Vila</h3>
      <p>This is Kep Merli Marine Villa, </br>  a living space redeffing design tandarts in Albania </p> 
     </div> 
   </div>