回答編集履歴
2
説明の追記
test
CHANGED
|
@@ -35,3 +35,11 @@
|
|
|
35
35
|
サンプル
|
|
36
36
|
|
|
37
37
|
[https://codepen.io/hatena19/pen/dyyeJpV](https://codepen.io/hatena19/pen/dyyeJpV)
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
解説
|
|
42
|
+
|
|
43
|
+
cardクラス(=.flexbox > div)に `position: relative;` card-linkクラスに `position: absolute;` を設定することで、card-link を card の固定位置に配置できます。`bottom: 5px;` で下辺から5px上に配置します。
|
|
44
|
+
|
|
45
|
+
これだけだと、card内の他の要素と重なるので、paddingで下辺に間隔をあけてます。
|
1
コード修正
test
CHANGED
|
@@ -6,25 +6,21 @@
|
|
|
6
6
|
|
|
7
7
|
.flexbox > div {
|
|
8
8
|
|
|
9
|
-
background: rgb(241, 239, 236);
|
|
9
|
+
background: rgb(241, 239, 236);
|
|
10
10
|
|
|
11
|
-
padding:0 0 2rem; /*
|
|
11
|
+
padding:0 0 2rem; /* 修正 */
|
|
12
12
|
|
|
13
|
-
flex: 1 0 300px;
|
|
13
|
+
flex: 1 0 300px;
|
|
14
14
|
|
|
15
|
-
margin: 10px 5px 10px 5px;
|
|
15
|
+
margin: 10px 5px 10px 5px;
|
|
16
|
+
|
|
17
|
+
position: relative; /* 追加 */
|
|
16
18
|
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
|
|
20
22
|
|
|
21
23
|
/* 以下追加 */
|
|
22
|
-
|
|
23
|
-
.card {
|
|
24
|
-
|
|
25
|
-
position: relative;
|
|
26
|
-
|
|
27
|
-
}
|
|
28
24
|
|
|
29
25
|
.card-link {
|
|
30
26
|
|