質問編集履歴
2
画像
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -186,4 +186,5 @@
|
|
|
186
186
|
サンプルコードでは.wrapperにdisplay: flex;で**”横並び”**になるはずですよね？
|
|
187
187
|
私が２分割と言っているのは、Divを横並びにするということです。
|
|
188
188
|
|
|
189
|
-
codepenでの２分割とは、今ある現状のmessages部分を１列と考えるならば倍にして２列にし、横並びにしたいということです。
|
|
189
|
+
codepenでの２分割とは、今ある現状のmessages部分を１列と考えるならば倍にして２列にし、横並びにしたいということです。
|
|
190
|
+
|
1
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
### overflowできるページの２分割
|
|
1
|
+
追記### overflowできるページの２分割
|
|
2
2
|
お手数おかけしますが、まず[こちら](https://codepen.io/aybukeceylan/pen/OJRNbZp)のコードペンのURLを確認していただきたいです。
|
|
3
3
|
右側にclient messagesという部分があると思うのですが、こちらを２分割にして使用したいと考えております。
|
|
4
4
|
通常であれば親要素にdisplay: flex;を適用すればいいと思うのですが、うまくいきませんでした。
|
|
@@ -12,17 +12,10 @@
|
|
|
12
12
|
</div>
|
|
13
13
|
<div class="messages ">
|
|
14
14
|
<div class="message-box ">
|
|
15
|
-
|
|
15
|
+
|
|
16
16
|
<div class="message-content ">
|
|
17
17
|
<div class="message-header ">
|
|
18
18
|
<div class="name ">Stephanie</div>
|
|
19
|
-
<div class="star-checkbox ">
|
|
20
|
-
<input type="checkbox " id="star-1 ">
|
|
21
|
-
<label for="star-1 ">
|
|
22
|
-
<svg xmlns="http://www.w3.org/2000/svg " width="20 " height="20 " viewBox="0 0 24 24 " fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round " class="feather feather-star ">
|
|
23
|
-
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2 " /></svg>
|
|
24
|
-
</label>
|
|
25
|
-
</div>
|
|
26
19
|
</div>
|
|
27
20
|
<p class="message-line ">
|
|
28
21
|
I got your first assignment. It was quite good. ???? We can continue with the next assignment.
|
|
@@ -163,6 +156,34 @@
|
|
|
163
156
|
}
|
|
164
157
|
}
|
|
165
158
|
```
|
|
159
|
+
|
|
160
|
+
### 追記
|
|
161
|
+
解決できると考えたコードに関してですが、文字数の問題もあり、サンプルコードを参考にしていただきたいです。
|
|
162
|
+
上述した通り（わかりにくくてすみません）
|
|
166
|
-
<div class="message-box">
|
|
163
|
+
<div class="message-box">の中に
|
|
164
|
+
<div class="projects-section-header">で囲まれた部分を入れ子にして２回分入れてます。
|
|
165
|
+
イメージとして下にサンプルコードを書きます。
|
|
166
|
+
|
|
167
|
+
```sample
|
|
168
|
+
<div class="wrapper">
|
|
167
|
-
<div class="
|
|
169
|
+
<div class="column cat1"> //ここが<div class="projects-section-header">以降の１回目に相当
|
|
170
|
+
<div class="info">
|
|
171
|
+
<h2>アラン</h2>
|
|
172
|
+
<p>(ローラン)</p>
|
|
173
|
+
<a href="#">プロフィール</a>
|
|
168
|
-
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
<div class="column cat2"> //ここが<div class="projects-section-header">以降の2回目に相当
|
|
177
|
+
<div class="info">
|
|
178
|
+
<h2>アステア</h2>
|
|
179
|
+
<p>(ラダトーム)</p>
|
|
180
|
+
<a href="#">プロフィール</a>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
サンプルコードでは.wrapperにdisplay: flex;で**”横並び”**になるはずですよね？
|
|
187
|
+
私が２分割と言っているのは、Divを横並びにするということです。
|
|
188
|
+
|
|
189
|
+
codepenでの２分割とは、今ある現状のmessages部分を１列と考えるならば倍にして２列にし、横並びにしたいということです。
|