画像とテキストが横並びにならない。

前提・実現したいこと

こんにちはプログラミング学習を始めて一か月のものです。
ページの模写をしているのですが思い道理にいかなくて困っています。
模写しようとしているページ

発生している問題・エラーメッセージ

Shop informationの画像とテキストが横並びにならない。

該当のソースコード

html
1
2<section class="shop-information">
3        <div class="common-inner">
4            <h2 class="section-title">Shop shop-information</h2>
5            <p class="section-text">shiroの店舗情報をご紹介します。</p>
6
7            <div class="shop-brock">
8                <p class="shop-block__image">
9                    <img src="C:\Users/shop_information.png" alt="">
10                </p>
11                
12                <div class="shop-block__container">
13                    <div class="shop-block__container">
14                
15                        <p class="shop-brock__title">住所</p>
16                        <p class="shop-brock__text">〒810-0001 福岡県福岡市中央区天神0-0-0</p>
17                    </div>
18
19                    <div class="shop-block__wrapper">
20                        <p class="shop-brock__title">電話番号</p>
21                        <p class="shop-brock__text">0120-000-000</p>
22                    </div>
23
24                    <div class="shop-block__wrapper">
25                        <p class="shop-brock__title">営業時間</p>
26                        <p class="shop-brock__text">11:00-20:30 （定休日：水曜日）</p>
27                    </div>
28
29                    <div class="shop-block__wrapper">
30                        <p class="shop-brock__title">アクセス</p>
31                        <p class="shop-brock__text">天神駅12a出口から徒歩6分 東京駅8b出口から徒歩12分</p>
32                    </div>                
33                </div>
34            </div>
35
36        </div>
37
38    </section>

css
1@charset "UTF-8";
2
3*, *::before, *::after {
4  box-sizing: border-box;
5  margin: 0;
6  padding: 0;
7}
8body {
9  margin: 0;
10  font-family: sans-serif;
11  font-size: 16px;
12  color: #2b2b2b;
13}
14
15h1, h2, h3, p {
16  margin: 0;
17  padding: 0;
18}
19
20a {
21  color: #2b2b2b;
22  text-decoration: none;
23}
24
25section {
26  text-align: center;
27}
28
29
30
31.common-inner{
32    padding: 80px 0;
33    max-width: 960px;
34    margin: 0 auto;
35}
36.shop-block{
37  display: flex;
38  justify-content: space-between;
39  align-items: center;
40  width: 100%;
41  
42  
43}
44
45.shop-block__image{
46  width: 50%;
47  
48}
49
50.shop-block__container{
51  display: flex;
52  width: 50%;
53}

試したこと

親要素にdisplay:flex;を指定したが解決しなかった。
一応子要素にもやってみたが解決しなかった。

補足情報（FW/ツールのバージョンなど）

なし

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

回答2件

ベストアンサー

タイプミスですね。

(誤)
<div class="shop-brock">

(正)
<div class="shop-block">

上記で画像とテキストは横並びになります。
模写先のページではテキスト部分（住所など）はテーブルにしてますが、
Flexでするなら、下記のような感じですね。
.shop-block__container には flex は設定せずに、shop-block__wrapper にflexを設定します。

html
1<section class="shop-information">
2  <div class="common-inner">
3    <h2 class="section-title">Shop shop-information</h2>
4    <p class="section-text">shiroの店舗情報をご紹介します。</p>
5
6    <div class="shop-block">
7      <p class="shop-block__image">
8        <img src="https://placehold.jp/480x316.png" alt="">
9      </p>
10
11      <div class="shop-block__container">
12        <div class="shop-block__wrapper">
13
14          <p class="shop-brock__title">住所</p>
15          <p class="shop-brock__text">〒810-0001 福岡県福岡市中央区天神0-0-0</p>
16        </div>
17
18        <div class="shop-block__wrapper">
19          <p class="shop-brock__title">電話番号</p>
20          <p class="shop-brock__text">0120-000-000</p>
21        </div>
22
23        <div class="shop-block__wrapper">
24          <p class="shop-brock__title">営業時間</p>
25          <p class="shop-brock__text">11:00-20:30 （定休日：水曜日）</p>
26        </div>
27
28        <div class="shop-block__wrapper">
29          <p class="shop-brock__title">アクセス</p>
30          <p class="shop-brock__text">天神駅12a出口から徒歩6分<br>東京駅8b出口から徒歩12分</p>
31        </div>                
32      </div>
33    </div>
34
35  </div>
36
37</section>

css
1@charset "UTF-8";
2
3*, *::before, *::after {
4  box-sizing: border-box;
5  margin: 0;
6  padding: 0;
7}
8body {
9  margin: 0;
10  font-family: sans-serif;
11  font-size: 16px;
12  color: #2b2b2b;
13}
14
15h1, h2, h3, p {
16  margin: 0;
17  padding: 0;
18}
19
20a {
21  color: #2b2b2b;
22  text-decoration: none;
23}
24
25section {
26  text-align: center;
27}
28
29.common-inner{
30    padding: 80px 0;
31    max-width: 960px;
32    margin: 0 auto;
33}
34.shop-block{
35  display: flex;
36  justify-content: space-between;
37  align-items: center;
38  width: 100%;
39}
40
41.shop-block__image{
42  width: 50%;
43}
44
45.shop-block__container{
46  width: 50%;
47}
48
49.shop-block__wrapper{
50   display: flex;
51   align-items: center;
52}
53
54.shop-brock__title {
55  flex: 0 0 25%;
56  border-right: 1px solid #a0a0a0;
57  padding: 10px;
58  margin: 10px;
59}
60
61.shop-brock__text {
62  padding: 10px;
63}

投稿2020/02/29 12:42

編集2020/02/29 13:09

hatena19

総合スコア34075

orcagame

2020/03/01 01:29

初歩的なところを間違っていました、、詳しく解説してくださりありがとうございました！

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

shop-block__container をflex にしているのでその配下に画像も入れる必要があります。
以下で横並びになりました。

html
1 <section class="shop-information">
2  <div class="common-inner">
3    <h2 class="section-title">Shop shop-information</h2>
4    <p class="section-text">shiroの店舗情報をご紹介します。</p>
5
6
7    <div class="shop-block__container">
8
9      <div class="shop-block__wrapper">
10        <p class="shop-block__image">
11          <img src="https://shptomoya.github.io/shiro/img/shop_information.png" alt="">
12        </p>
13      </div>
14
15      <div>
16        <div class="shop-block__wrapper">
17          <p class="shop-block__title">住所</p>
18          <p class="shop-block__text">〒810-0001 福岡県福岡市中央区天神0-0-0</p>
19        </div>
20
21        <div class="shop-block__wrapper">
22          <p class="shop-brock__title">電話番号</p>
23          <p class="shop-brock__text">0120-000-000</p>
24        </div>
25
26        <div class="shop-block__wrapper">
27          <p class="shop-block__title">営業時間</p>
28          <p class="shop-block__text">11:00-20:30 （定休日：水曜日）</p>
29        </div>
30
31        <div class="shop-block__wrapper">
32          <p class="shop-block__title">アクセス</p>
33          <p class="shop-block__text">天神駅12a出口から徒歩6分 東京駅8b出口から徒歩12分</p>
34        </div>
35      </div>
36    </div>
37  </div>
38
39</section>

css
1@charset "UTF-8";
2
3*, *::before, *::after {
4  box-sizing: border-box;
5  margin: 0;
6  padding: 0;
7}
8body {
9  margin: 0;
10  font-family: sans-serif;
11  font-size: 16px;
12  color: #2b2b2b;
13}
14
15h1, h2, h3, p {
16  margin: 0;
17  padding: 0;
18}
19
20a {
21  color: #2b2b2b;
22  text-decoration: none;
23}
24
25section {
26  text-align: center;
27}
28
29
30
31.common-inner{
32    padding: 80px 0;
33    max-width: 960px;
34    margin: 0 auto;
35}
36.shop-block{
37  display: flex;
38  justify-content: space-between;
39  align-items: center;
40  width: 100%;
41
42
43}
44
45.shop-block__image{
46  width: 50%;
47
48}
49
50.shop-block__container{
51  display: flex;
52  width: 50%;
53}