回答編集履歴

2

全てのボックスの高さを可変させる

2020/04/24 01:28

投稿

toremy
toremy

スコア52

test CHANGED
@@ -16,13 +16,9 @@
16
16
 
17
17
  section {
18
18
 
19
-
20
-
21
19
  width: 100%;
22
20
 
23
21
  max-width: 1400px;
24
-
25
- max-height: 560px;
26
22
 
27
23
  display: flex;
28
24
 
@@ -30,41 +26,19 @@
30
26
 
31
27
  }
32
28
 
33
-
34
-
35
- .item_left {
29
+ .item_left img{ width: 100%;}
36
-
37
- background: #eee;
38
-
39
- width: 500px;
40
-
41
- }
42
-
43
-
44
30
 
45
31
  .item_center {
46
32
 
47
33
  background: #ff8989;
48
34
 
49
- }
35
+ width:400px;
50
36
 
51
-
52
-
53
- .item_title {
54
-
55
- height: 300px;
37
+ max-height: 300px;
56
38
 
57
39
  }
58
40
 
59
-
60
-
61
- .item_right {
41
+ .item_right img{ width: 100%;}
62
-
63
- background: #eee;
64
-
65
- width: 500px;
66
-
67
- }
68
42
 
69
43
  </style>
70
44
 
@@ -78,15 +52,17 @@
78
52
 
79
53
  <section>
80
54
 
81
- <div class="item_left">左BOX</div>
55
+ <div class="item_left"><img src="http://placehold.jp/500x560.png"></div>
82
56
 
83
57
  <div class="item_center">
84
58
 
85
- <h2 class="item_title">この要素の高さを300pxと想定(item_title)</h2>
59
+ <h2 class="item_title">真ん中</h2>
86
60
 
87
61
  </div>
88
62
 
89
- <div class="item_right">右BOX</div>
63
+ <div class="item_right"><div class="item_left"><img src="http://placehold.jp/500x560.png"></div>
64
+
65
+ </div>
90
66
 
91
67
  </section>
92
68
 
@@ -102,6 +78,4 @@
102
78
 
103
79
  ↑補足確認いたしました。
104
80
 
105
- BOXが分かるように勝手に背景を付けしたが、希望表示は上記のようなものでしょうか?
81
+ ダミーで画像も入れてので、確認てみてください。
106
-
107
- ご確認下さい。

1

補足を確認して修正しました。

2020/04/24 01:28

投稿

toremy
toremy

スコア52

test CHANGED
@@ -1,27 +1,107 @@
1
1
  ```HTML
2
2
 
3
+ <!DOCTYPE html>
4
+
5
+ <html>
6
+
7
+
8
+
9
+ <head>
10
+
11
+ <title>test1</title>
12
+
13
+ <link rel="stylesheet" href="test1.css">
14
+
15
+ <style>
16
+
17
+ section {
18
+
19
+
20
+
21
+ width: 100%;
22
+
23
+ max-width: 1400px;
24
+
25
+ max-height: 560px;
26
+
27
+ display: flex;
28
+
29
+
30
+
31
+ }
32
+
33
+
34
+
35
+ .item_left {
36
+
37
+ background: #eee;
38
+
39
+ width: 500px;
40
+
41
+ }
42
+
43
+
44
+
45
+ .item_center {
46
+
47
+ background: #ff8989;
48
+
49
+ }
50
+
51
+
52
+
53
+ .item_title {
54
+
55
+ height: 300px;
56
+
57
+ }
58
+
59
+
60
+
61
+ .item_right {
62
+
63
+ background: #eee;
64
+
65
+ width: 500px;
66
+
67
+ }
68
+
69
+ </style>
70
+
71
+ </head>
72
+
73
+
74
+
75
+ <body>
76
+
77
+
78
+
79
+ <section>
80
+
81
+ <div class="item_left">左BOX</div>
82
+
83
+ <div class="item_center">
84
+
3
- <img class="item_img" src="" alt="" style="height=560px">
85
+ <h2 class="item_title">この要素の高さを300pxと想定(item_title)</h2>
86
+
87
+ </div>
88
+
89
+ <div class="item_right">右BOX</div>
90
+
91
+ </section>
92
+
93
+
94
+
95
+ </body>
96
+
97
+
98
+
99
+ </html>
4
100
 
5
101
  ```
6
102
 
7
- style指定を削除↓
103
+ 補足確認いたしました。
8
104
 
9
- ```HTML
105
+ BOXが分かるように勝手に背景を付けましたが、希望の表示は上記のようなものでしょうか?
10
106
 
11
- <img class="item_img" src="" alt="">
12
-
13
- ```
14
-
15
-
16
-
17
- ↓CSSに以を追記
107
+ ご確認さい。
18
-
19
- ```css
20
-
21
- .item_img{width: 100%; max-width: 1400px; max-height:560px; }
22
-
23
- ```
24
-
25
-
26
-
27
- こちらで希望の表示ができると思います。