回答編集履歴
1
コードのインデント調整
answer
CHANGED
|
@@ -48,15 +48,10 @@
|
|
|
48
48
|
CSSは、`class="flex"`に`display: flex;`を設定して、日付、カテゴリーに`flex`で適切な幅を設定すればきれいにそろいます。
|
|
49
49
|
|
|
50
50
|
```css
|
|
51
|
-
.cloumn {
|
|
52
|
-
display: flex;
|
|
53
|
-
flex-wrap: wrap;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
51
|
.cloumn h2 {
|
|
57
52
|
width: 100%;
|
|
58
|
-
border-bottom: rgb(117, 68, 172) 3px solid;
|
|
53
|
+
border-bottom: rgb(117, 68, 172) 3px solid;
|
|
59
|
-
padding-bottom: 15px;
|
|
54
|
+
padding-bottom: 15px;
|
|
60
55
|
}
|
|
61
56
|
.cloumn .date {
|
|
62
57
|
flex: 0 0 130px;
|
|
@@ -68,17 +63,17 @@
|
|
|
68
63
|
align-self: baseline;
|
|
69
64
|
}
|
|
70
65
|
.news {
|
|
71
|
-
background-color: rgb(37, 77, 104);
|
|
66
|
+
background-color: rgb(37, 77, 104);
|
|
72
67
|
}
|
|
73
68
|
.product {
|
|
74
|
-
background-color: rgb(201, 103, 16);
|
|
69
|
+
background-color: rgb(201, 103, 16);
|
|
75
70
|
}
|
|
76
71
|
.text {
|
|
77
72
|
margin-left: 20px;
|
|
78
73
|
text-decoration: underline;
|
|
79
74
|
}
|
|
80
75
|
.flex {
|
|
81
|
-
|
|
76
|
+
display: flex;
|
|
82
77
|
}
|
|
83
78
|
.box {
|
|
84
79
|
flex: 0 0 220px;
|