現在もPas-Polというサイトの模写をやっています。display: flex; とflex-direction: column; を使って https://pas-pol.jp/のNEWS欄の下にある画像と文字のような並び。画像と文字を一気に、横並びすることとを試みましたが
コードがおかしかったせいか上手くいきませんでした。
私の理想は
img text
img text
img text
のような形で画像と文字を横に並ばせることです。ですがdisplay: flexを使うと画像のような並びになってしまいます。
それを改善しようとしてflex-direction: column; を使ったら横並びしなくなって頭を抱えています。
6つ一括にimg text のような形
img text
img text
img text
img text
img text
img text
にするにはどうすれば良いですか。回答よろしくお願いいたします。
HTML
1 <div class="wrap"> 2 <div class="img"> 3 <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/09/paspol_closing-2.jpg"> </div> 4 <div class="text">地球一周 365日 5 世<br>界遺産絶景の旅</div> 6 7 8 <div class="img"> 9 <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/07/summer_postcard-2.jpg"> </div> 10 <div class="text"> 365日 京都 絶景の<br>旅</div> 11 12 13 <div class="img"> 14 <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/05/springphoto.jpg"></div> 15 <div class="text">365日 北海道 絶景<br> 16 日めくりカレンダー</div> 17 18 19 <div class="img"> 20 <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/12/2020-12-10-16.59.15.jpg"></div> 21 <div class="text">365日 北海道 22 絶景<br>の旅</div> 23 24 </div> 25<div class="img"> 26 <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/10/th_shutterstock_756071179.jpg"> </div> 27 <div class="text"> The World<br> 28 Festival Duide 29 - <br>海外の音楽フェス完<br> 30 全ガイド -</div> 31 32 33 <div class="img"> 34 <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/09/sekaiisan_tabibitonokoe2.jpg"> </div> 35 <div class="text">この世界で死ぬまで<br> 36 にしたいこと2000</div> 37
css
1.wrap { 2display: flex; 3flex: wrap; 4} 5 6.img img { 7 width: 320px; 8
回答2件
あなたの回答
tips
プレビュー