左にテキスト、右に画像（それと狭めた時のデザイン）

１．左にテキストを配置して、右に画像（画像の下にリンクボタンを複数配置）を配置したいのですが、画像の下にボタンを配置するのがうまくいかず困っています。
コードは以下、

<div style="border:1px solid;">
 <div style="float:right">
  <img src="" style="border:1px solid red;width:100px;height:10px;" /><br />
  <a href="">ボタンだよ</a>
 </div>あああああああああああああああああああああああああああああああさああああああああああああああああああ さあああああああああああああああああ     
</div>

2.[1.]のものをレスポンシブで、幅を狭めた時のデザインですが、
通常はデザインBでしょうか？どちらも何か見にくいような気がして・・・。

デザインA・・・画像下にリンクが行くので、リンクボタンまで見ない？
「
テキスト
テキスト
テキスト
画像
（リンクボタン）
」
デザインB・・・[1.]を狭めただけなのですが、これだとテキストが見にくい？
「
テキスト画像
テキスト（リンクボタン）
テキストテキストテキスト
」

コード

5o5o_wagon

2016/09/09 10:56

状況がわかりづらいので、実際のコードを```コード```と書かれた部分に記載してください。また、デザインAとデザインBをスクリーンキャプチャして貼り付けてみてください。

退会済みユーザー

2016/09/09 11:53

すみません、コード貼り付けていませんでした。コード貼り付けましたが、これだと２。の場合に、「画像ボタンテキスト」になってしまいますよね・・・・・。

kei344

2016/09/09 11:55 編集

「うまくいかない」とは「何をしたときに」「どうなると思って」「どうなったのか」をお書きください。（一部勘違いがあったため編集しました、すいません）

行動規範の内容に同意します

回答2件

質問者さんが実現したいことがわからないですが、想像でアドバイスしてみます。
また、HTMLとCSSの基本知識が抜けているような気がしているので、(違かったらすみません)
どの辺を勉強すればいいかの参考になればと思います。

HTMLは文書構造、CSSは見た目を調整

まず、提示しているコードを見やすくするために、cssを分けて整理すると例えば以下のようになるかと思います。(わかりやすさのためにclassを定義してます)

HTML
1<div class="box">
2    <div class="floatBox">
3        <img src="/img/hoge.jpg" class="image"><br>
4        <a href="">ボタンだよ</a>
5    </div>
6    あああああああああああああああああああああああああああああああさああああああああああああああああああ さあああああああああああああああああ     
7</div>

CSS
1.box {
2  border: 1px solid;
3}
4.floatBox {
5  float: right;
6}
7.image {
8  border: 1px solid red;
9  width: 100px;
10  height: 10px;
11}

参考：CSSとは？
参考：スタイルシートの class と id の使い分け

文書を構成するブロックレベル要素と文章の一部のインライン要素

「あああああああああああああああああああああああああああああああさああああああああああああああああああさあああああああああああああああああ」と書いているテキストが <p> などで囲われていなかったり、 br で無理に見た目を調整しようとされているところから、以下のリンクにあるようなことを知るとよいかと思います。

参考：ブロックレベル要素とインライン要素

ブロックレベル要素は、