Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
前提・実現したいこと
画像とテキストをひとくくりにして、横並び
発生している問題・エラーメッセージ
Flexboxを使っているのですが横並びになりません。imgのみにすると横並びになりますがpとdivをつけると縦になります。
よろしくお願いします。
エラーメッセージ
該当のソースコード
ソースコード ```<div class="three"> <div class="i"> <img src="image.png" alt=""/> <p>レッスンは１対１でじっくり会話できます。</p> </div> <div class="i"> <img src="image.png" alt=""/> <p>スマホはいつでも予約可能</p> </div> <div class="i"><img src="image.png" alt=""/> <p>分からない事があればいつでも相談できるサポート体制</p></div> </div> .three{ display: flex; } .i{ width: 30%; margin: 0; } .i img { width: 100%; margin: 0; } .i p { width: 100%; margin: 0; } ### 試したこと リストにしたりしても横並びになりません、imgのみにすると横並びになりますがpとdivをつけると縦になります。 ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。
現状のコードで、画像の下にテキストがきて、それがひとくくりて、横並びになってますが、ご希望のレイアウトではないのですか。希望のレイアウトを画像で提示してください。
回答2件
0
dreamweaverは使ったことがないのですが、
起動→新規作成→html5を選択
で下記になるように書き込むと、できているのですがどうでしょう。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style type="text/css"> <!-- .three{ display: flex; } .i{ width: 30%; margin: 0; } .i img { width: 100%; margin: 0; } .i p { width: 100%; margin: 0; } --> </style> </head> <body> <div class="three"> <div class="i"> <img src="image.png" alt=""/> <p>レッスンは１対１でじっくり会話できます。</p> </div> <div class="i"> <img src="image.png" alt=""/> <p>スマホはいつでも予約可能</p> </div> <div class="i"><img src="image.png" alt=""/> <p>分からない事があればいつでも相談できるサポート体制</p></div> </div> </body> </html>
いったんベンダーフレックスのことは無視しています。
dreamweaverがわからず申し訳ないです・・・
ちなみに下記で試すとどうでしょう。
li等を使ってみてます。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style type="text/css"> <!-- .three{ width: 100%; } .three ul{ display:-webkit-box; display:-ms-flexbox; display:flex; list-style: none; margin: 0; padding: 0; } .three ul li{ width: 33.3%; margin: 0 10px; } .three ul li img{ width: 100%; } --> </style> </head> <body> <div class="three"> <ul> <li> <img src="001.png" alt=""/> <p>レッスンは１対１でじっくり会話できます。</p> </li> <li> <img src="001.png" alt=""/> <p>スマホはいつでも予約可能</p> </li> <li> <img src="001.png" alt=""/> <p>分からない事があればいつでも相談できるサポート体制</p> </li> </ul> </div> </body> </html>
投稿2020/01/27 08:35
総合スコア18
0
ベストアンサー
上記ソースで試してみたところ、PCブラウザgoogle chrome / ie11 / Edge / firefox では横並びになりました。
もしかしたら「iphone等スマホで横並びにならない」ということでしょうか？
safari等ではベンダーフレックスを設定してあげる必要がありますので、
.three{ display:-webkit-box; display:-ms-flexbox; display:flex; }
このように書いてあげると、iphoneでも横並びになると思います。
↓ここ参考になります。
https://webdesign-trends.net/entry/8257
また、pタグに100％等をつけなくても問題ないと思います。
見当違いなことを答えていたらすみません。
投稿2020/01/27 01:27
編集2020/01/27 01:35総合スコア18
あなたの回答
tips
プレビュー
