Q&A
『横二列の縦三列の折り返し』とは、
14
25
36
ということですか？
HTML
1<div id="new-img"> 2 <ul id="img-list"> 3 <li class="img-1"><img src="images1.jpg"></li> 4 <li class="img-2"><img src="images2.jpg"></li> 5 <li class="img-3"><img src="images3.jpg"></li> 6 <li class="img-4"><img src="images4.jpg"></li> 7 <li class="img-5"><img src="images5.jpg"></li> 8 <li class="img-6"><img src="images6.jpg"></li> 9 </ul> 10</div>
6つの画像をHTMLで記述すると縦に並ぶのですが、これをCSSで縦二列に三つづつ並べて折り返し表示させたいです。(以下のように)
1 2
3 4
5 6
id="new-img"とid="img-list"とulやliに、それぞれdisplay: flex;とflex-wrap: wrap;を使用してみましたが二列になりません。
どのようにすれば希望するように並べられるのでしょうか？
回答2件
0
こういうことですか？
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>test</title> 7 <style> 8 .img-list li { 9 list-style-type: none; 10 display: inline-block; 11 } 12 </style> 13</head> 14 15<body> 16 <div id="new-img"> 17 <ul class="img-list"> 18 <li class="img-1"><img src="images1.jpg"></li> 19 <li class="img-2"><img src="images2.jpg"></li> 20 </ul> 21 <ul class="img-list"> 22 <li class="img-3"><img src="images3.jpg"></li> 23 <li class="img-4"><img src="images4.jpg"></li> 24 </ul> 25 <ul class="img-list"> 26 <li class="img-5"><img src="images5.jpg"></li> 27 <li class="img-6"><img src="images6.jpg"></li> 28 </ul> 29 </div> 30</body> 31 32</html>
htmlを編集しない場合の追記
css
1#img-list { 2 list-style-type: none; 3 display: flex; 4 flex-wrap: wrap; 5} 6 7#img-list::before { 8 content: ""; 9 width: 100%; 10 order: 1; 11} 12 13ul li:nth-child(n+3):nth-child(-n+4) { 14 order: 2; 15} 16 17#img-list::after { 18 content: ""; 19 width: 100%; 20 order: 3; 21} 22 23ul li:nth-child(n+5):nth-child(-n+6) { 24 order: 4; 25}
投稿2019/07/03 11:59
編集2019/07/03 13:58
総合スコア158
言葉足らずですみません。CSSでの実装でご教授いただけますと有難いです。
htmlを変更しないならこれでできると思います。
4行、5行と増えるならhtml修正したほうが早いです。
#img-list {
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
#img-list::before {
content: "";
width: 100%;
order: 1;
}
ul li:nth-child(n+3):nth-child(-n+4) {
order: 2;
}
#img-list::after {
content: "";
width: 100%;
order: 3;
}
ul li:nth-child(n+5):nth-child(-n+6) {
order: 4;
}
ご回答ありがとうございます。
参考にさせていただいたのですが未だ解決できず…ブラウザの問題もあるのでしょうか…。
記述を参考にもう少しやってみます。
参考にお使いのブラウザは何でしょうか？
FirefoxとChromeです。
一旦他部分を見直してみることにします。
その後再度試してみたいと思います。
行が増える場合はHTMLでの方が早いこと、勉強になりました。
ありがとうございました。
0
画像のサイズが成り行きなら、こんな感じでしょうか。
css
1#img-list{ 2 display:flex; 3 flex-flow:wrap; 4} 5#img-list li{ 6 width:50%; 7 box-sizing:content-box; 8}
サイズが決まっているなら、#img-listのwidthを画像2枚分にすればいいかと思います。
投稿2019/07/03 12:18
編集2019/07/03 12:20総合スコア37488
ご回答ありがとうございます。
参考にさせていただいたのですが未だ解決できず…ブラウザの問題もあるのでしょうか…。
記述を参考にもう少しやってみます。
そうでしたか。
当方の環境では縦2列になっています。
usmさんの環境では、↓これは縦2列になっていますか？
https://jsfiddle.net/Lhankor_Mhy/kpjc05db/
もし、縦2列になっていないなら、環境の問題かと思います。
もし、縦2列になっているなら、ご提示いただいていない部分に原因があるかと思います。
ご確認ください。
FirefoxとChromeではurlのものは二列になっているのですが、いざbracketsにて記述してChromeで確認すると二列にはなっておりません。
他部分の見直しと修正してみます。
その後ご回答の方法を再度試してみたいと思います。
ありがとうございました。
box-sizing を指定するなら border-box でしょう。
border があると落ちます。
ああ、おっしゃりとおりですね。
うっかりしてました。
あなたの回答
tips
プレビュー
