图像右上角的文字

Question

我想知道如何为所有分辨率（从27到iPhone）构建此示例，我想将我的文本放在我的底部图像上方 - ＆gt;

.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