如何在圖像的右側放置文本？

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> 

Answer 2

套用text-align: right; 到banner 。

http://jsfiddle.net/5y6v1o35/

Answer 3

添加text-align: right; float: right; 到Herotext： http ： //jsfiddle.net/yeyp7sfk/1/

Answer 4

在.herotext中添加以下內容：

position:fixed;
right:0px;
top:0px;

向上游動以正確放置它。

Answer 5

試試這個： http : //jsfiddle.net/Lxrsmj25/

<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>.banner {
    background-image: url("http://d.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2013/09/3017047-poster-1280-google.jpg");
    float: left;
    height: 400px;
    width: 100%;
}

.herotext {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    bottom: 20px;
    color: #fff;
    float: right;
    font-family: "museo_slab500"; 
    line-height: 50%;
    padding: 0 20px;
    position: absolute;
    right: 0;
    top: 0;
    height:150px;
    width: 40%;
}

Answer 6

試試這個更新的JSFIDDLE

.banner{
   width:100%;
   background-image: url(http://www.crazymonkeydefense.com/wp-content/uploads/2014/03/black-hd-background-background-wallpapers-abstract-photo-cool-black-background.jpg); 
   background-repeat: no-repeat;
   background-size: 100%; 
   background-position: 65% 35% ;   
   padding-top: 200px;
   overflow: hidden;
}

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

只需添加text-align: right; 如果要右對齊