Q&A
前提・実現したいこと
floatで画像とテキストを横並びにしたい
発生している問題・エラーメッセージ
画像とテキストをひっくるめた下記のdivタグを横に三つ並べたいのですが、できません。
<div class="course">
<div class="course_list">
<img src="img/web_first.png" class="course_img">
<p>HTML / CSS / Bootstrap</p>
</div>
該当のソースコード
HTML
1<html lang="ja"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>模写</title> 5 <meta name="description" content="初めての模写コーディング"> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <header> 10 <div class="head_left">30DAYSトライアル</div> 11 <div class="head_right"> 12 <ul> 13 <li>デイトラとは</li> 14 <li>コース一覧</li> 15 <li>お問い合わせ</li> 16 </ul> 17 </div> 18 </header> 19 <img src="img/main-vsual.png" class="img"> 20 <div class="container"> 21 <h2>デイトラとは</h2> 22 <div class="container_menu"> 23 <img src="img/about.png" class="container_img"> 24 <p> 25 デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。<BR>1日1題30日でプロのWebエンジニアを目指しましょう！ 26 </p> 27 </div> 28 29 <div class="course"> 30 <div class="course_list"> 31 <img src="img/web_first.png" class="course_img"> 32 <p>HTML / CSS / Bootstrap</p> 33 </div> 34 35 <div class="course"> 36 <div class="course_list"> 37 <img src="img/web_second.png" class="course_img"> 38 <p>HTML / CSS / JabaScript / jQuery</p> 39 </div> 40 </div> 41 42 <div class="course"> 43 <div class="course_list"> 44 <img src="web_third.png" class="course_img"> 45 <p>PHP / WordPress</p> 46 </div> 47 </div> 48 49 </div> 50 </div> 51 </body> 52</html> 53
CSS
1header { 2 width: 960px; 3 margin: 0 auto; 4} 5 6.container { 7 width: 960px; 8 margin: 0 auto; 9} 10 11.head_left { 12 float: left; 13} 14 15.head_right li { 16 list-style: none; 17 float: right; 18 margin-right: 50px; 19} 20 21.img { 22 width: 100%; 23 background-repeat:no-repeat; 24 background-size: contain; 25} 26 27.container h2 { 28 text-align: center; 29 margin: 50px 0; 30} 31 32.container_img { 33 float: left; 34 width: 50%; 35 margin-right: 15px; 36} 37 38.course { 39 float: left; 40} 41 42.course_img { 43 width: 20%; 44} 45
試したこと
floatを親要素や子要素に変えてかけてみたりしましたが、反応がないか上のテキスト（デイトラとは、無料で・迷わず・楽しく～）の続きとして回り込んでしまいます。
回答1件
0
ベストアンサー
最初の.courseの閉じタグの場所がおかしいです。
また、横並びにするなら.courseに幅を設定する必要があるでしょう。
投稿2020/06/13 17:52
総合スコア69608
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/13 18:03 編集
2020/06/15 11:35