質問編集履歴
5
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,7 +3,13 @@
|
|
|
3
3
|
・テキストが長くなった場合でも、テキストの幅と画像の幅を同じにしたい
|
|
4
4
|
|
|
5
5
|
**【悩んでいること】**
|
|
6
|
+
**①**
|
|
7
|
+
テキストの横幅を、画像の親要素に指定すれば解決しそうですが、
|
|
8
|
+
その後テキストの長さが変わる可能性を考慮すると、この方法はあまり良くないように思えます。
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
**②**
|
|
6
|
-
テキストの横幅をvwで画像の親要素に指定した場合、
|
|
12
|
+
「①」の方法を取ったとしても、テキストの横幅をvwで画像の親要素に指定した場合、
|
|
7
13
|
スマホの画面で見ると、画像がテキストの横幅からはみ出してしまいます。
|
|
8
14
|
※スマホ用サイトのため、vwの方が良いのでは？と思いvwで指定しています。
|
|
9
15
|
（下記ダミーの余白はpxですが、実物は余白もvwで指定しています）
|
4
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
**▼スマホ横画面 がっつりはみ出ている**
|
|
20
|
+
**▼スマホ横画面 機種に関わらず、がっつりはみ出ている**
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
```html
|
3
補足修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
テキストの横幅をvwで画像の親要素に指定した場合、
|
|
7
7
|
スマホの画面で見ると、画像がテキストの横幅からはみ出してしまいます。
|
|
8
8
|
※スマホ用サイトのため、vwの方が良いのでは？と思いvwで指定しています。
|
|
9
|
-
（実物は余白もvwで指定しています）
|
|
9
|
+
（下記ダミーの余白はpxですが、実物は余白もvwで指定しています）
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
**【参考画像】**
|
2
vwで指定 画像添付
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,22 +2,24 @@
|
|
|
2
2
|
・.containerの右下に、テキストの下に画像を並べたものを配置
|
|
3
3
|
・テキストが長くなった場合でも、テキストの幅と画像の幅を同じにしたい
|
|
4
4
|
|
|
5
|
-
**【現状】**
|
|
6
|
-
・テキストよりも画像の方が大きいため、テキストの横幅からはみ出す
|
|
7
|
-
|
|
8
5
|
**【悩んでいること】**
|
|
9
|
-
テキストの横幅を画像の親要素に指定
|
|
6
|
+
テキストの横幅をvwで画像の親要素に指定した場合、
|
|
10
|
-
|
|
7
|
+
スマホの画面で見ると、画像がテキストの横幅からはみ出してしまいます。
|
|
11
|
-
|
|
8
|
+
※スマホ用サイトのため、vwの方が良いのでは？と思いvwで指定しています。
|
|
12
|
-
|
|
9
|
+
（実物は余白もvwで指定しています）
|
|
13
10
|
|
|
14
11
|
|
|
15
12
|
**【参考画像】**
|
|
16
|
-
上…テキストの幅を
|
|
13
|
+
上の青い四角…テキストの横幅をvwで画像の親要素に 指定している
|
|
17
|
-
下…テキストの幅を
|
|
14
|
+
下の青い四角…テキストの横幅をvwで画像の親要素に 指定していない
|
|
18
15
|
|
|
16
|
+
**▼スマホ縦画面 機種（スマホスクリーンの幅）が変わると崩れてしまう**
|
|
17
|
+
|
|
19
|
-
|
|
20
19
|
|
|
20
|
+
**▼スマホ横画面 がっつりはみ出ている**
|
|
21
|
+
|
|
22
|
+
|
|
21
23
|
```html
|
|
22
24
|
<div class="container">
|
|
23
25
|
<div class="box">
|
|
@@ -62,7 +64,7 @@
|
|
|
62
64
|
width: 112px;
|
|
63
65
|
}
|
|
64
66
|
.inner img {
|
|
65
|
-
width:
|
|
67
|
+
width: 27.1vw;
|
|
66
68
|
}
|
|
67
69
|
.now .inner {
|
|
68
70
|
width: auto;
|
|
@@ -70,4 +72,6 @@
|
|
|
70
72
|
|
|
71
73
|
```
|
|
72
74
|
|
|
75
|
+
以上になります。
|
|
76
|
+
何か良い方法がありましたら、教えていただけますと幸いです。
|
|
73
|
-
|
|
77
|
+
よろしくお願いいたします…！
|
1
質問タイトルの修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
兄弟要素
|
|
1
|
+
兄弟要素の横幅を、短い方に揃える方法
|
body
CHANGED
|
File without changes
|