文本位于顶部右侧的图像

Question

我想知道如何建立这个例子中所有分辨率（从27到iPhone），我希望把我的文字只是我上面的底部图像 - >

.content { 
 
    display: inline-block; 
 
    width: 100%; 
 
    max-width: 800px; 
 
    margin: 0px auto 75px 
 
} 
 
.imgstyle { 
 
    float: left; 
 
    max-width: 800px; 
 
    width: 100%; 
 
} 
 
.textcontent { 
 
    text-align: left; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    max-width: 300px; 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
    z-index: 1000; 
 
    width: 100%; 
 
} 
 
.hr { 
 
    height: 1px; 
 
    width: 50px; 
 
    background: #282828; 
 
} 
 
.textstyle1 { 
 
    font-family: 'GFS Didot', serif; 
 
    font-weight: 300; 
 
    text-align: left; 
 
    margin-top: 30px; 
 
    font-size: 40px; 
 
} 
 
.textstyle2 { 
 
    text-align: left; 
 
    line-height: 21px; 
 
    margin-top: 20px; 
 
} 
 
.textstyle3 { 
 
    text-align: left; 
 
    line-height: 21px; 
 
    font-weight: 700 
 
}

<div class="content"> 
 
    <img class="imgstyle" src="http://www.facticemagazine.com/newsletter/img/test/1.jpg" /> 
 
    <div class="textcontent"> 
 
    <div class="hr"></div> 
 
    <h1 class="textstyle1">Keep them<br/>closed</h1> 
 
    <p style="textstyle2">Helen Molsted by Arron Dunworth 
 
     <br/>Exclusive/November 11, 2016</p> 
 
    <p class="textstyle3">Read more ></p> 
 
    </div> 
 
</div>

Answer 1

你必须删除left: 0并添加right: 0。

Updated Fiddle

Answer 2

尝试： -

.textstyle1{ 
 
\t margin:0px auto; 
 
\t float:right; 
 
\t }

<h1 class="textstyle1">Keep them<br/>closed</h1>

或

.textstyle1{ 
 
\t margin:0px auto; 
 
\t float:right; 
 
\t } 
 
P{ 
 
\t text-align:right; 
 
\t margin:60px auto; 
 
\t } 
 
\t

<h1 class="textstyle1">Keep them<br/>closed</h1><br> 
 
<p>Helen Molsted by Arron Dunworth 
 
     <br/>Exclusive/November 11, 2016</p> 
 
     <p>Read more</p>