画像の位置を固定したいです

添付画像のように続きを読むボタンを配置しているのですが、
上の段の文字が二行になると、ボタンも一緒に一行上に動いてしまいます。

ためしに
boxクラスのposistionにrelativeを指定して
bodymoreクラスのposistionのabsoluteを指定したのですが、
続きを読むの画像が全て同じ位置に移動してしまいました。

上の行の行数に関わらず、ボタンの位置を固定したいのですが、
どうすればよいでしょうか？


<!-- トップページの記事一覧ループ -->
<div class="box">
<header class="article-header">
<div class="article-body">
<div class="article-body-inner">

<!--見出し画像の表示-->
<a href="http://test/archives/8611038.html"><img class="border-img" src="http://test/imgs/a/a/aa93555c-s.jpg" width="250" height="180" border="15" alt="" align="left" hspace="15"vspace="15" /></a>

<!-- 投稿日時 -->
<div class="article-header-date"><time datetime="2018-04-22T16:44:09+0900" pubdate="pubdate">2018年04月22日</time></div><br />

<!-- 記事のタイトル -->
<h1>
<a href="http://test/archives/8611038.html" itemprop="url">テスト記事1テスト記事1テスト記事1テスト記事1</a>
</h1>

<!-- 続きを読む -->
<span class="bodymore"><a href="http://test/archives/8611038.html"><img src="http://test/imgs/c/8/c82aaac7-s.png" width="250" height="91" alt="続きを読む" /></a></span><br />
</div>

</header>
</div>


/*記事一覧の囲い*/
.box {
color: #2c2c2f;
background: #fff8e8;
width:710px;
margin-left:auto;
margin-right:auto;
border: solid 1px black;
box-sizing: border-box;
margin-top: 1rem;
}

/*見出し*/
.article-body-inner h1{
font-size: 25px;
padding: 0;
float: inherit;
margin-bottom: 0px;
}

/*続きを読む*/
.bodymore {
margin-left: 170px;
width: 240px;
height: 91px;
}


よろしくお願いします。

No.1 ベストアンサー 回答者： runix2007 回答日時： 2018/04/30 18:25

clearしないからじゃないですか

この回答へのお礼

ご回答ありがとうございます。
.bodymore.imgクラスにclearしてみたのですが、効果がありませんでした。
修正箇所がおかしいのでしょうか？

お礼日時：2018/04/30 21:13