画像を左に文字を右に

Question

この様に画像を左に文字を右に入れると言うことができなくてとても困っています。
色々と試したのですがなかなか動きません。
どのたか助けて下さい。よろしくお願い致します

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[Yorrie]

色々と試したのなら、試してみた結果あなたが打ち込んだコードがあるはずですよね…
できる限り、そういうものは記載してもらえないでしょうか…
ここでもらったコードをばっと貼り付けるだけでは、成長にはつながらないかと思いますので。

[kai0310]

過去の質問は一個ずつ解決していきましょう。
一つずつ確実に理解していかないと知識はつきませんよ

Answer 1

こんな感じでいかがでしょうか?

<a class="xxxx">
  <div class="img">
    <img src="" alt="">
  </div>
  <div class="content">
    <h3>見出しを入れます。</h3>
    <p>説明を入れます。</p>
  </div>
</a>

.xxxx {
  display: flex;
  color: #333; /* 文字色 */
}
.xxxx .img {
  margin-right: 20px; /* 20pxは余白です。好きなように設定してください */
  flex: 0 0 150px; /* 150pxは画像エリアの横幅です。好きなように指定してください。 */
}
.xxxx .img img {
  display: block;
  width: 100%;
}
.xxxx .content {
  flex: 1 1 0%; /* 文字のエリアは伸び縮みする設定 */
}

Answer 2

ざっくりですが、display: flexを使えば以下のような感じで行けるかと思います。

<ul>
  <li>
    <p>画像</p>
    <div>テキスト</div>
  </li>
  <li>
    <p>画像</p>
    <div>テキスト</div>
  </li>
</ul>

li {
  display: flex;
}
li p {
  width: 20%;
}
li div {
  width: 75%;
  margin-left: 5%;
}