画像を4枚ずつ横に並べて、以下のように実装したいのですが、
うまいこと行きません。何か記述ミスでしょうか?
html
1<div class='topic'> 2 <div class="topic-title"> 3 <h2>トピック</h2> 4 </div> 5 <div class='topic-image'> 6 <img src='img/topic/book.jpg'> 7 <img src='img/topic/car.jpg'> 8 <img src='img/topic/cos.jpg'> 9 <img src='img/topic/enjoy.jpg'> 10 <img src='img/topic/familly.jpg'> 11 <img src='img/topic/furima.jpg'> 12 <img src='img/topic/isan.jpg'> 13 <img src='img/topic/line@.jpg'> 14 <img src='img/topic/linear.jpg'> 15 <img src='img/topic/movie_tosimaen.jpg'> 16 <img src='img/topic/singer.png'> 17 <img src='img/topic/song.jpg'> 18 <img src='img/topic/sport.jpg'> 19 <img src='img/topic/tokimeki.jpg'> 20 </div> 21</div> 22 23 24 25
css
1div.topic{ 2 display: block; 3 position: relative; 4 top: 800px; 5 left: 380px; 6 } 7 8 div.topic-title{ 9 display: block; 10 background-color:mediumorchid; 11 } 12 div.topic-image{ 13 display: block; 14 background-color: white; 15 width: 900px; 16 height: auto; 17 } 18 div.topic-image img{ 19 display: flex; 20 flex-direction: row; 21 flex-wrap: wrap; 22 justify-content: space-between; 23 }
回答4件
あなたの回答
tips
プレビュー