Flexboxを使ってよこに並べることができない　ドットインストール

ドットインストールにて学習中です。横にに並べたい要素があったら、その親要素にプロパティを追加して今回だと icon と info の親要素は container なので、こちらにプロパティを追加しました。display: flex; としてあげてプラウザで確認しましたがうまく横並びになっていませんでした。どこが間違っているかわかりません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>諒のポートフォリオサイト</title>
6  <link rel="icon" href="favicon.ico">
7  <meta name="description" content="諒のポートフォリオサイト">   
8  <link rel="stylesheet" href="css/styles.css">
9   
10  </head>
11  <body>
12  <header>
13    <div class="container">
14        <div class="icon">
15
16        <img src="taro.png" width="120" height="120" alt="中野のアイコンです">
17
18        <div class="info">
19          
20        </div>
21        
22        
23        <h1>中野諒</h1>
24        <p>子持ちです。</p>
25        <ul>
26          <li>
27            
28            <a href="https://dotinstall.com" target="_blank">
29              
30              <img src="blog.png" width="20" height="20" alt="ブログサイトへのリンク画像です">
31              
32            </a>
33          </li>
34          <li>
35            <a href="https://dotinstall.com" target="_blank">
36              <img src="photos.png" width="20" height="20" alt="写真サイトへのリンク画像です">
37            </a>
38            
39          </li>
40          
41        </ul>
42        
43      </div>
44      
45      
46    </div>
47    </header>
48  <section>
49
50    <h1>works</h1>
51    
52    <section>
53    <img src="work1.png" width="400" height="260" alt="勇者ゲームの紹介画像">
54    <h2>勇者ゲーム</h2>
55    <p>楽しいアプリです楽しいあぷりです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです</p>
56     </section>
57
58      <section>
59      <img src="work2.png" width="400" height="260" alt="宝探しゲームの紹介画像">
60      <h1>宝探しゲーム</h1>
61      <p>楽しいアプリです楽しいあぷりです楽しいアプリです楽しいアプリです
62        楽しいアプリです楽しいアプリです</p>
63        </section>
64
65       <section>
66        <img src="work3.png" width="400" height="260" alt="神経衰弱の紹介画像">
67        <h1>神経衰弱</h1>
68        <p>楽しいアプリです楽しいあぷりです楽しいアプリです楽しいアプリです
69          楽しいアプリです楽しいアプリです</p>
70          </section>
71
72          
73        </section>
74          <footer>
75
76    <p>(c)dotinstaill.com</p>
77
78  </footer>
79  </body>
80</html>

CSS
1
2body {
3   color: #333;
4   font-family: verdana, sans-serif;
5   margin: 0;
6}
7
8header{
9   background-color: #efefef;
10}
11
12.container{
13  background-color: pink;
14  width: 400px;
15  margin-left:auto;
16  margin-right:auto;
17  display: flex;
18
19}
20
21.icon{
22   background-color: skyblue;
23}
24
25.icon img {
26  /* border-radius: 20px; */
27  border-radius: 50%;
28}
29
30.info{
31  background-color: tomato;
32  margin-left: 32px;
33}

hentaiman

2020/12/29 08:31

ドットインストールの有料サービスなら質問機能（仮）があるようですけど、そちらの利用はされないんですか？小中学生ではなさそうだしその程度の金を支払う能力はあると思うのですが。最短コーディング（https://teratail.com/questions/312812）の質問をされてたし、それならば勉強に利用しているサイトで用意されている有料の質問サービス利用するのが最短な訳ですが、その利用料の支払いケチっているのか知らないけど、ここで無償でベテランを教えて貰おうとする姿勢と求めるものがあってないような。

行動規範の内容に同意します

回答1件

ベストアンサー

ご質問の文章だけでは横に並べたい要素がよく分かりませんが、<div class="icon">と<div class="info">を並べるのであれば、

html
1    <div class="info">
2    </div>

の部分を

html
1    </div>
2    <div class="info">

としてみては。
現状のソースでは、<div class="info">タグが<div class="icon">タグの中に含まれてしまっています。

投稿2020/12/29 08:29

sizka_rn

総合スコア127

ryonakano0809

2020/12/29 08:34 編集

ありがとうございます！！！！大変たすかりました！！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

Flexboxを使ってよこに並べることができない　ドットインストール

関連した質問