質問: 横並びにしたいです 現在スマホサイトを制作しております。 以下画像のようなレイアウトにしたいのですがなにがおかしいかわからず教えてほしいです。 【理想】 ![理想](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/91cde9f88d8f51dce05753b0ab6d7994.png) 【現状】 ![現状](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/da6907c4217739ebe7afd1167d75a60b.png) ### 該当のソースコード ``` テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ``` ``` .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を使用した場合】 ![flexを使用](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/3dfd1721b6286a050e42d672c65b600d.png) ``` .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を使用した場合】 ![テーブルセル](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d148af2d18dd88fabc0d21b5c7566a2e.png) ``` .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; } ``` どれも解決策がわからずに今に至ります。マーキングがいけないのか指定の仕方がおかしいのか記述が抜けているのか全部なのかわからず申し訳ございません。どうかご教授お願い致します。
回答: 下記の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は全角空白がありましたので半角空白に修正してます。 また、``ブロックは不要なので削除してます。 CodePenサンプル