Q&A
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
###前提・実現したいこと
画像が横並びになぜかなりません。指差し確認したのですが、ほかに原因があるのでしょうか？
###発生している問題・エラーメッセージ
エラーメッセージ
###該当のソースコード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <title></title> </head> <body> <div class="inline> <div class="inline> <img src=""> </div> <div class="inline"> <div> <img src=""> <img src=""> </div> </div> </div> </body> </html>
CSS
.inline { display: inline-block; }
###試したこと
課題に対してアプローチしたことを記載してください
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
firefoxとchromeで確認しました
回答3件
0
ベストアンサー
ダブルクォーテーションの対応が取れていない箇所が複数ありますが、転記ミスでしょうか？また、キャッシュの消去を試してみては？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .inline { 13 display: inline-block; 14 } 15 </style> 16</head> 17<body> 18<div class="inline"> 19 <div class="inline"> 20 <img src="http://placehold.jp/3d4070/ffffff/200x150.png?text=image"> 21 </div> 22 23 <div class="inline"> 24 <div> 25 <img src="http://placehold.jp/3d4070/ffffff/200x150.png?text=image"> 26 <img src="http://placehold.jp/3d4070/ffffff/200x150.png?text=image"> 27 </div> 28 </div> 29</div> 30</body> 31</html>
投稿2017/03/27 00:12
総合スコア14731
0
下記のいずれかのパターンでしたら横並びに出来ます。
パターン1
css
1.inline { 2 display: inline-block; 3}
html
1<div class="wrap"> 2 <div class="inline"> 3 <img src=""> 4 </div> 5 6 <div class="inline"> 7 <img src=""> 8 <img src=""> 9 </div> 10</div>
パターン2
css
1.inline { 2 display: inline-block; 3}
html
1<div class="wrap"> 2 <div class="inline"> 3 <img src=""> 4 </div> 5 6 <div class="inline"> 7 <div class="inline"> 8 <img src=""> 9 <img src=""> 10 </div> 11 </div> 12</div>
投稿2017/03/27 02:00
総合スコア2092
0
<div class="inline"> /* ここはdisplay: inline-block; */ <div> /* ここで display: block; になっている */ <img> <img> </div> </div>
投稿2017/03/27 00:48
総合スコア353
あなたの回答
tips
プレビュー
