inline-blockが横並びになりません。。

画像の中の灰色の写真の右に、「タイトル１」「テキストテキストテキスト...」のひとかたまりを並べたいです。768px以下にブラウザのサイズを縮めた際のレスポンシブに対応したコードを書いております。

灰色の写真の親要素に　display: inline-block;　を、
そして「タイトル１」「テキストテキストテキスト...」のひとかたまりの親要素にも display: inline-block;　をつけましたがなぜか横並びになってくれなくて困っております。どこかに見えない隙間があるのでしょうか。。分かる人がいたら、ぜひ力を貸していただきたいです、何卒宜しくお願い致します。

コードは以下の通りです。

HTML
1<!doctype html>
2<html>
3     <head>
4      <meta charset="utf-8">
5      <title></title>
6      <link rel="stylesheet" href="style5.css">
7      <meta name="viewport" content="width=device-width,initial-scale=1">
8     </head>
9
10<body>
11   <div class="background">   
12     <div class="content">
13          <ul>
14             <li class="content__block">
15               
16                <div class="content__block__image">
17                     <img src="dummy.png">
18                   </div>
19                 <div class="content__block__header"> 
20                    <div class="content__block__title">タイトル1</div>
21                 <div class="content__block__txt">
22                  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
23                 </div>
24                </div>
25                 
26                 <div class="content__block__hosoku">
27                     補足補足補足補足<br>補足補足
28                 </div>
29                
30              </li>
31              <li class="content__block">
32                 
33                   <div class="content__block__image">
34                     <img src="dummy.png">
35                   </div>
36                  <div class="content__block__header">
37                    <div class="content__block__title">タイトル２</div>
38                 <div class="content__block__txt">
39                  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
40                 </div>
41                  </div>
42                 <div class="content__block__hosoku">
43                     補足補足補足補足<br>補足補足
44                 </div>
45              </li>
46              <li class="content__block">
47                 
48                    <div class="content__block__image">
49                      <img src="dummy.png">
50                     </div>
51                  <div class="content__block__header">
52                     <div class="content__block__title">タイトル３</div>
53                 <div class="content__block__txt">
54                  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
55                 </div>
56                  </div>
57                 <div class="content__block__hosoku">
58                     補足補足補足補足<br>補足補足
59                 </div>
60              </li>
61         
62         </ul>
63
64    </div>
65
66    </div>
67</body>
68
69
70
71</html>
72コード

css
1*{
2    padding: 0;
3    margin: 0;
4}
5.background{
6    width: 100%;
7    background: #EEEEEE;
8}
9
10.content{
11    width: 960px;
12    margin: 0 auto;
13    text-align: center;
14    font-size: 0;
15}
16
17.content__block__image img{
18    width: 80px;
19    height: 80px;
20}
21.content ul{
22    width: 960px;
23    display: flex;
24}
25
26.content__block{
27    display: inline-block;
28    width: calc(100%/3);
29    padding: 20px;
30    font-size: 16px;
31    box-sizing: border-box;
32    border: 1px solid black;
33    margin: 30px 20px 30px 20px;
34    background: white;
35    
36}
37
38.content__block__title{
39    margin: 10px 0 20px 0;
40    font-size: 20px;
41    font-weight: bold;
42    text-align: center;
43}
44
45.content__block__txt{
46    text-align:left;
47    font-size: 16px;
48    display: inline-block;
49}
50
51.content__block__hosoku{
52    text-align: left;
53    font-size: 14px;
54}
55
56@media screen and (max-width: 767px){
57    .content{
58    width: auto;
59    text-align: left;
60}
61
62    .content__block__image{
63        display: inline-block;
64    }
65
66    .content__block__header{
67        display: inline-block;
68    }
69    
70    .content__block__image img{
71        width: 100%;
72        max-width: 60px;
73        max-height: 60px;
74    }
75    
76    .content__block__title{
77        margin: 0 0 10px 0;
78    }
79    
80.content ul{
81    width: auto;
82    display: block;
83}
84
85.content__block{
86    width: auto;
87    padding: 20px;
88    font-size: 0;
89    margin: 10px 15px 20px 10px;
90}
91    
92    .content__block__txt{
93        margin: 0;
94    }
95}
96
97
98
99コード

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

回答3件

widthを指定していないからだと思います。

投稿2020/04/24 10:42

退会済みユーザー

総合スコア0

chifflot

2020/04/24 12:39

ありがとうございます！

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

css
1.content__block{
2width:33%;
3display:inline-block;
4}

投稿2020/04/24 10:57

yambejp

総合スコア114814

chifflot

2020/04/24 12:39

ありがとうございます！

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

ベストアンサー

widthが指定されていないためだと思われます。
こちらでいかがでしょうか?

CSS
1@media screen and (max-width: 767px) {
2  .content {
3    width: auto;
4    text-align: left;
5  }
6
7  .content__block__image {
8    display: inline-block;
9    margin-right: 20px; /* 画像の右側の余白 */
10  }
11
12  .content__block__header {
13    display: inline-block;
14    width: calc(100% - 60px - 20px); /* 100% - 画像の横幅 - 画像の右側の余白 */
15  }
16
17  /* 中略 */
18}