cssが反映されない

左上の図のようになりません。宜しくお願い致します。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>CSS Practice</title>
6    <link rel="stylesheet" href="default.css">
7  </head>
8  <body>
9
10    <div class="container">
11        <div class="box gray">
12          Hello Hello Hello Hello Hello Hello
13        </div>
14        <div class="box silver">
15          Hello Hello Hello
16        </div>
17      </div>
18        <div class="box orange">
19          Hello Hello Hello Hello Hello Hello
20        </div>
21      </div>
22    </div>
23
24  </body>
25</html>
26

css
1
2.container {
3  display: table;
4  width: 300px;
5}
6.box {
7  display: table-cell;
8
9}
10.gray { background: gray; }
11.silver { background: silver; }
12.orange { background: orange; }
13

リンク内容

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

回答1件

ベストアンサー

以下のようにするとどうでしょうか。
index14.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>CSS Practice</title>
6    <link rel="stylesheet" href="default.css">
7</head>
8<body>
9
10<div class="container">
11    <div class="box gray">
12        Hello Hello Hello Hello Hello Hello
13    </div>
14    <div class="box silver">
15        Hello Hello Hello
16    </div>
17    <div class="box orange">
18        Hello Hello Hello Hello Hello Hello
19    </div>
20</div>
21<!-- 以下のdivタグは必要ない。 -->
22<!-- </div> -->
23<!-- </div> -->
24</body>
25</html>

default.css

CSS
1.container {
2    display: table;
3    width: 300px;
4}
5
6.box {
7    display: table-cell;
8}
9
10.gray {
11    background: gray;
12}
13
14.silver {
15    background: silver;
16}
17
18.orange {
19    background: orange;
20}