Q&A前提・実現したいこと
下記の写真の様に配置される様にHTMLを書きたいと思っています。
CSSで要素を横並びにする方法として、display: block;があったので使ってみたのですが、上手くいきませんでした。
直接的な解決策でなくとも、大まかな実装方針を教えて頂けると幸いです。
該当のソースコード
HTML
1<html> 2<head> 3 <meta charset="utf-8"> 4 <title>hogehoge</title> 5 <link rel="HOGEHOGE.css"> </head> 6<body> 7 8 <div class="AtagPictures_1"> 9 <img src = "xxx1"> 10 <img src = "xxx2"> 11 <img src = "xxx3"> 12 <img src = "xxx4"> 13 </div> 14 15 <div class = "AtagFigure_1"> 16 <img src = "vvv1"> 17 <img src = "vvv2"> 18 <img src = "vvv3"> 19 <img src = "vvv4"> 20 </div> 21 22 23 24 25 <div class="AtagPictures_2"> 26 <img src = "xxx5"> 27 <img src = "xxx6"> 28 <img src = "xxx7"> 29 <img src = "xxx8"> 30 </div> 31 32 <div class="AtagFigure_2"> 33 <img src = "vvv5"> 34 <img src = "vvv6"> 35 <img src = "vvv7"> 36 <img src = "vvv8"> 37 </div> 38 39</body>
CSS
1body { 2 font-family: "Avenir Next"; 3} 4 5.AtagPictures_1 { 6 display: block; 7 8} 9 10.AtagPictures_2 { 11 display: block; 12 13} 14 15.AtagFigure_1 { 16 display: block; 17 18} 19 20.AtagFigure_2 { 21 display: block; 22 23}
回答2件
0
投稿2020/06/18 10:28
総合スコア55
0
自己解決
body {
font-family: "Avenir Next";
}
.AtagPictures_1{
display: flex;
flex-wrap:wrap;
}
.AtagFigure_1{
display: flex;
flex-wrap:wrap;
}
.AtagPictures_2{
display: flex;
flex-wrap:wrap;
}
.AtagFigure_2{
display: flex;
flex-wrap:wrap;
}
.AtagPictures_1 img{
width: calc(100%/4);/←画像を横に4つ並べる場合/
padding:0 0px;/←画像の左右に5pxの余白を入れる場合/
box-sizing:border-box;
}
.AtagFigure_1 img{
width: calc(98%/4);/←画像を横に4つ並べる場合/
box-sizing:border-box;
}
.AtagPictures_2 img{
width: calc(100%/4);/←画像を横に4つ並べる場合/
padding:0 0px;/*←画像の左右に5pxの余白を入れる場合*/ box-sizing:border-box;
}
.AtagFigure_2 img{
width: calc(100%/4);/←画像を横に4つ並べる場合/
box-sizing:border-box;
}
投稿2020/06/18 12:27
総合スコア33
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/18 12:26