Q&A
貼り付けたリンクのように横並びにしたいのですが調べてやってみてもうまくできません。どうすればいいのでしょうか？
コードは以下の通りでcssは書いていません
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>test</title> 8 <link rel="stylesheet" href="test.css"> 9</head> 10<body> 11<div class="main"><h1>test</h1> 12 13<img src="IMG_3810.JPG" class="#" width="300px" height="200px"> 14<p class="test"> -width:表示領域の横幅 15 -height:表示領域の高さ 16 -max-width:表示領域の横幅(この後の指定が適用される最大値)s 17 -min-width:表示領域の横幅(この後の指定が適用される最小値) 18 -device-width:デバイスの横幅 19 -device-height:デバイスの高さ 20 -orientation:デバイスの向き(スマホ、タブレット向き 縦長：portrait横長：landscape)</p> 21 </div> 22<div class="main2"> 23 24 <h1>main</h1> 25 <img src="IMG_3835.JPG" width="300px" height="200px"> 26 <p class="test"> -width:表示領域の横幅 27 -height:表示領域の高さ 28 -max-width:表示領域の横幅(この後の指定が適用される最大値) 29 -min-width:表示領域の横幅(この後の指定が適用される最小値) 30 -device-width:デバイスの横幅 31 -device-height:デバイスの高さ 32 -orientation:デバイスの向き(スマホ、タブレット向き 縦長：portrait横長：landscape)</p></div> 33</body> 34</html>
回答1件
0
ベストアンサー
こんばんは。
コードは以下の通りでcssは書いていません
書いてください。CSSを使わないでHTMLで実装したいという事でしょうか?
CSSでなんと記述していいか分からなかったという認識で回答します。
貼り付けたリンクのように横並びにしたいのですが調べてやってみてもうまくできません。どうすればいいのでしょうか？
どうやって調べたのでしょうか？また、参考にしているサイトがあるならそのサイトのコードを見れば良いのでは?という疑問が生じます。
現在では、Googleでcss 横並びと検索するだけで該当する記事等があると思います。
##本題
要素を横並びする方法として今回はFlexboxでの実装方法で回答します。
参考： MDN
横並びにしたい要素に以下のコードを記述してあげれば良いかと思います。
css
1 display: flex;
動くサンプル
上記リンクで実行結果とコードを確認する事ができます。
お確かめください。
投稿2020/02/11 12:09
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/11 12:25
退会済みユーザー
2020/02/11 16:09
退会済みユーザー
2020/02/11 16:13 編集