teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

修正

2017/02/24 06:13

投稿

kyunta
kyunta

スコア350

answer CHANGED
@@ -1,50 +1,56 @@
1
- 色々な仕様・設定が入っているので最終的な形がこれでいいのか分かりませんが。。。
1
+ 色々な仕様・設定が入っているので最終的な形がこれでいいのか分かりませんが参考に
2
- 出来るだけ元のコードを残しています。
2
+ 出来るだけ元のコードを残していますが、ブラウザによって表示が崩れるので。。
3
- 編集:chromeで表示が崩れるのを確認したので修正。
3
+ 編集:firefoxで表示が崩れるのを確認したので修正。
4
4
 
5
5
  ```ここに言語を入力
6
- .conA .container {
6
+ .conA {
7
- width:auto;
7
+ width:100%;
8
+ height: auto;
8
9
  }
10
+ .container {
11
+ display: flex;
12
+ width: 100%;
13
+ }
9
14
  .conA ul {
10
15
  display: flex;
11
16
  flex-direction: row;
12
17
  flex-wrap: wrap;
13
- text-align: center;
18
+ width: 100%;
14
19
  }
15
- .conA ul li {
20
+ .conA ul li {
16
21
  display: flex;
17
- flex: 1 1 50%;
22
+ flex: 1 calc(100% / 2);
18
- margin: 0 auto;
19
- width: 100%;
20
23
  position: relative;
24
+
25
+ justify-content: center;
26
+ align-items: center;
27
+ margin-left: auto;
21
28
  }
29
+
22
- .conA p {
30
+ .conA li p {
23
- display: block;
31
+ display: flex;
24
32
  position:absolute;
33
+ top: 0;
34
+ left: 0;
35
+ right: 0;
25
- /*top:40%;
36
+ bottom: 0;
26
- left:45%;*/
37
+ margin: auto;
38
+ justify-content: center;
27
- text-align: center;
39
+ align-items: center;
28
40
  }
29
41
  .conA li img {
42
+ display: flex;
43
+ justify-content: center;
44
+ align-items: center;
30
45
  width: 100%;
31
46
  height: auto;
32
47
  }
33
48
  .conA .sm img {
34
- display: block;
49
+ display: flex;
35
50
  margin: auto;
36
51
  width: 50%;
37
52
  height: auto;
38
53
  }
39
54
 
40
- li {
41
- justify-content: center;
42
- align-items: center;
43
- }
44
- li p {
45
- display: block;
46
- margin: auto;
47
- }
48
55
 
49
-
50
56
  ```

2

修正

2017/02/24 06:12

投稿

kyunta
kyunta

スコア350

answer CHANGED
@@ -44,15 +44,7 @@
44
44
  li p {
45
45
  display: block;
46
46
  margin: auto;
47
-
48
- color: #f00;
49
- background-color: #aaf;
50
47
  }
51
- li {
52
- background-color: #afa;
53
- }
54
- img {
55
- border: 1px solid #f00;
56
- }
57
48
 
49
+
58
50
  ```

1

修正

2017/02/24 02:59

投稿

kyunta
kyunta

スコア350

answer CHANGED
@@ -1,5 +1,6 @@
1
1
  色々な仕様・設定が入っているので最終的な形がこれでいいのか分かりませんが。。。
2
2
  出来るだけ元のコードを残しています。
3
+ 編集:chromeで表示が崩れるのを確認したので修正。
3
4
 
4
5
  ```ここに言語を入力
5
6
  .conA .container {
@@ -19,7 +20,7 @@
19
20
  position: relative;
20
21
  }
21
22
  .conA p {
22
- display: inline-block;
23
+ display: block;
23
24
  position:absolute;
24
25
  /*top:40%;
25
26
  left:45%;*/
@@ -31,8 +32,7 @@
31
32
  }
32
33
  .conA .sm img {
33
34
  display: block;
34
- margin-left: auto;
35
+ margin: auto;
35
- margin-right: auto;
36
36
  width: 50%;
37
37
  height: auto;
38
38
  }
@@ -42,9 +42,17 @@
42
42
  align-items: center;
43
43
  }
44
44
  li p {
45
- display: flex;
45
+ display: block;
46
- justify-content: center;
46
+ margin: auto;
47
+
48
+ color: #f00;
47
- align-items: center;
49
+ background-color: #aaf;
48
50
  }
51
+ li {
52
+ background-color: #afa;
53
+ }
54
+ img {
55
+ border: 1px solid #f00;
56
+ }
49
57
 
50
58
  ```