画像とテキストを横並びにしたい

Question

横並びにしたいです

現在スマホサイトを制作しております。
以下画像のようなレイアウトにしたいのですがなにがおかしいかわからず教えてほしいです。

【理想】

【現状】

該当のソースコード

<div class="FAQlist">
　<div class="FAQqustion">
　　<img src="/img/faq/Q.png" alt="">
　　<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
　</div>
　<div class="FAQAnswer">
　　<img src="/img/faq/A.png" alt="">
　　<div class="FAQAnswer02">
　　　<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
　　</div>
　</div>
</div>

.FAQlist{
	margin: 0.5rem 1rem;
}

.FAQqustion{
	background-color: #efefef;
	border-radius:1rem;
	margin: 0.5rem;
	padding: 0.5rem;
}
.FAQqustion p{
	display:inline-block;
}
.FAQqustion img{
	width: 10%;
	height: auto;
	margin: 0.5rem;
	display:inline-block;
}
.FAQAnswer{
	margin: 0.5rem;
}
.FAQAnswer02{
	display:inline-block;
}
.FAQAnswer img{
	width: 10%;
	margin: 0.5rem;
	display:inline-block;
}

QとAが違うのはクラスの付け方が違うのかなと思ったのですがどうにもならずにこうなってます。inline-blockがなぜ効かないかがわからず途方に暮れています。
作業環境はWindows10・Dreamweaver(21)・chromeで行っております。ブラウザプレビューはDreamweaverの機能を使用しています。
flexを使用した場合は画像が縦長になってしまい、table-cellを使用したら上ぞろえになりませんでした。inline-blockは横並びにならずマーキングの仕方かタグの選び方が違うのかわかりませんでした。
中身がぐちゃぐちゃしているので申し訳ないです。素人すぎて調べてもわからず何がいけないがさっぱりわかりません。どうかよろしくお願いします。

ちなみに
【flexを使用した場合】

.FAQlist{
	margin: 0.5rem 1rem;
}

.FAQqustion{
	background-color: #efefef;
	border-radius:1rem;
	margin: 0.5rem;
	padding: 0.5rem;
	display:flex;
}
.FAQqustion p{
}
.FAQqustion img{
	width: 10%;
	height: auto;
	margin: 0.5rem;
}
.FAQAnswer{
	margin: 0.5rem;
	display:flex;
}
.FAQAnswer02{
}
.FAQAnswer img{
	width: 10%;
	margin: 0.5rem;
}

【table-cellを使用した場合】

.FAQlist{
	margin: 0.5rem 1rem;
}

.FAQqustion{
	background-color: #efefef;
	border-radius:1rem;
	margin: 0.5rem;
	padding: 0.5rem;
	display: table;
}
.FAQqustion p{
	display: table-cell;
}
.FAQqustion img{
	width: 100%;
	height: auto;
	margin: 0.5rem;
	display: table-cell;
}
.FAQAnswer{
	margin: 0.5rem;
	display: table;
}
.FAQAnswer02{
	display: table-cell;
}
.FAQAnswer img{
	width: 100%;
	margin: 0.5rem;
	display: table-cell;
}

どれも解決策がわからずに今に至ります。マーキングがいけないのか指定の仕方がおかしいのか記述が抜けているのか全部なのかわからず申し訳ございません。どうかご教授お願い致します。

Comments

[itzuakniami123]

flexを使用したと書いてありますが、どの部分に適用しましたか？
.FAQqustion と .FAQAnswerにdisplay:flexを適用したが要素が上ぞろえにならないという意味ですか？

[taki00000]

おっしゃるクラスに使用したのですが、なぜか画像がpタグの大きさに合わせて縦長に変形してしまって解決策がわからずに断念しました。上ぞろえにならなかったのはdisplay:table-cellを使用した場合ですね。

Answer 1

下記のCSSでどうですか。
50pxの部分は画像のサイズに合わせてください。

.FAQlist{
  margin: 0.5rem 1rem;
}
.FAQlist > div {
  display: flex;
  margin: 0.5rem;
  padding: 0.5rem;
}
.FAQlist > div > img {
  flex: 0 0 50px;
  height: 50px;
  margin: 0.5rem;
}

.FAQqustion{
  background-color: #efefef;
  border-radius:1rem;
}

HTMLは全角空白がありましたので半角空白に修正してます。
また、<div class="FAQAnswer02">ブロックは不要なので削除してます。

CodePenサンプル

Comments

[taki00000]

回答ありがとうございました。flexをしっかり理解しておらずFlexboxは縦も高さもないのでflex-directionで指定しないといけないということを今回初めてしりました（flex: 0 0 50px;←この記述の意味が分からず調べました）
またコードも簡潔になっており無意味なマーキングもなくなっており目から鱗でした。なかなか他人のコードを見る機会がなかったので大変参考になりました。ありがとうございました

Answer 2

画像がpタグの大きさに合わせて縦長に変形してしまう

原因

.FAQqustion img{
　　width: 10%;
　　height: auto;
}

高さをきちんと指定していないからです。

また、width:10%;という表記もまずいと思います。
画面サイズを変えていったときに、その親要素（.FAQqustion）に依存する形になるので。
画像サイズはちゃんとpx指定してあげてください。

また、HTMLですが<div>の閉じ忘れがあります。

正しくは

<div class="FAQlist">
	<div class="FAQqustion">
		<img src="/img/faq/Q.png" alt="">
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div><!-- FAQqustion -->

	<div class="FAQAnswer">
		　<img src="/img/faq/A.png" alt="">
		<div class="FAQAnswer02">
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div><!-- FAQAnswer02 -->
	</div><!-- FAQAnswer -->

</div><!-- FAQlist -->

面倒だとは思いますが、最初のうちは何のid名やclass名の閉じタグかコメントアウトすると良いでしょう。

Comments

[taki00000]

すみません。スマホサイト用に作っていると最初に記述するべきでした。スマホサイトもpx指定の方がいいですかね？小さくなりすぎても大きくなりすぎてもいけないかなと思ってパーセントを使っていたんですが…。
divは閉じ忘れてますね。申し訳ございません。

[hatena19]

> スマホサイトもpx指定の方がいいですかね？

メディアクエリを使って、スマホサイト用とPC用でサイズを変更するか、vw単位指定するかですね。

[itzuakniami123]

Googleのデバッグモードで見れば一目でわかると思いますが、スマホサイト用に作っていると言えど、機種によって全体の横幅サイズは違ってくるわけです。
親要素である.FAQqustionのwidthの10%が画像サイズになる（＝親要素のwidthに依存する）ので…。
レイアウトが崩れる原因にもなりかねないので、できるだけpx指定してあげてください。

[taki00000]

アドバイスありがとうございます！
スマホサイトのみなので今後はpx指定したいと思います。