質問編集履歴
2
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -188,4 +188,18 @@
|
|
|
188
188
|
###やってみたこと
|
|
189
189
|
左列の緑色の要素（ボックスタイトル1と3）をくくる要素を付加（例えば、left-container）し、
|
|
190
190
|
右列の緑色の要素（ボックスタイトル2と4）をくくる要素を付加（例えば、right-container）して
|
|
191
|
-
実装すれば、実現することができますが、仕様の関係上、各列をくくる要素を付加せずにしなければなりません。
|
|
191
|
+
実装すれば、実現することができますが、仕様の関係上、各列をくくる要素を付加せずにしなければなりません。
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
###付与
|
|
195
|
+
jQueryを使ってstyleにbreak-before: column;と書く様にしました。
|
|
196
|
+
その場合、リロードして、
|
|
197
|
+
最初にボックスタイトル2をタップすると、画像①のようになり、
|
|
198
|
+
最初はボックスタイトル4や3をタップした後にボックスタイトル2を押すと画像②のようにうまく行きます。
|
|
199
|
+
なぜなんでしょうか。
|
|
200
|
+
|
|
201
|
+
画像①
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
画像②
|
|
205
|
+
|
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
画像の様に、緑色の要素があるかと思いますが、jQueryでtoggle機能を付与しているのですが、
|
|
4
4
|
緑色の要素を押すと、その下にいくつかボックスが現れます。
|
|
5
5
|
|
|
6
|
-
その時に緑色の横の要素（例えば、ボックスタイトル1の横の要素はボックスタイトル2）
|
|
6
|
+
その時に緑色の横の要素（例えば、ボックスタイトル1の横の要素はボックスタイトル2）とその下（ボックスタイトル4）との高さ間の大きさが大きくなってしまいます。
|
|
7
7
|
|
|
8
|
-
実現したいこととしては、緑色の要素を押すと、右側の要素（ボックスタイトル2）はそのままでいてほしいです。
|
|
8
|
+
実現したいこととしては、緑色の要素を押すと、右側の要素間（ボックスタイトル2と4）の大きさはそのままでいてほしいです。
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
###現状の状態
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
toggle後の状態
|
|
17
|
-
|
|
18
18
|
###コード
|
|
19
19
|
```html
|
|
20
20
|
<!DOCTYPE html>
|
|
@@ -152,6 +152,7 @@
|
|
|
152
152
|
display: flex;
|
|
153
153
|
flex-wrap: wrap;
|
|
154
154
|
justify-content: space-between;
|
|
155
|
+
align-items: flex-start
|
|
155
156
|
}
|
|
156
157
|
|
|
157
158
|
.container .boxes .content {
|