回答編集履歴
1
誤字の修正
test
CHANGED
|
@@ -6,10 +6,11 @@
|
|
|
6
6
|
80のimgだと合計で160になるので、横並びにならず縦に並びます。
|
|
7
7
|
|
|
8
8
|
お手本だと横に3つ並んでると思うので、例えばimgに対して33％を指定すれば横並びになります。
|
|
9
|
-
|
|
9
|
+
```css
|
|
10
10
|
.worksimg img{
|
|
11
11
|
width:33%;
|
|
12
12
|
}
|
|
13
|
+
```
|
|
13
14
|
|
|
14
15
|
ラベルタグの横並びについて
|
|
15
16
|
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
あとは、初期値として<dd>にmargin-leftが設定されているので、それを0にすれば横並びになります。
|
|
24
25
|
|
|
25
26
|
↓元のコードをできるだけ崩さないように入れてます。
|
|
26
|
-
|
|
27
|
+
```css
|
|
27
28
|
.news dl {
|
|
28
29
|
display: flex;
|
|
29
30
|
flex-wrap:wrap;
|
|
@@ -31,19 +32,18 @@
|
|
|
31
32
|
margin-bottom: 20px;
|
|
32
33
|
}
|
|
33
34
|
.news dt {
|
|
34
|
-
background-color:red;
|
|
35
35
|
width: 20%;
|
|
36
36
|
border-bottom: solid 1px #c8c8c8;
|
|
37
37
|
padding: 15px;
|
|
38
38
|
box-sizing:border-box;
|
|
39
39
|
}
|
|
40
40
|
.news dd {
|
|
41
|
-
background-color:blue;
|
|
42
41
|
width: 80%;
|
|
43
42
|
border-bottom: solid 1px #c8c8c8;
|
|
44
43
|
padding: 15px;
|
|
45
44
|
margin-left:0;
|
|
46
45
|
box-sizing:border-box;
|
|
47
46
|
}
|
|
47
|
+
```
|
|
48
48
|
|
|
49
49
|
全体的にwidthの設定がされてないなどあったので、これだけではないと思いますが、一応これでやりたいことはできるかなと思います。
|