cssでli要素の画像を横３列 縦２列にできません
解決したいこと
cssで画像を横３列の２行にしたいのですが、できません。
（display: flex;や flex-wrap: wrap;はやってみたのですが適応されておりません。
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
HTML
<!-- works -->
<section id="works">
<h2>Works</h2>
<ul class="items">
<li><img src="img/works1.jpeg" alt="ワーク１" / class="item"></li>
<li><img src="img/works2.jpeg" alt="ワーク２" / class="item"></li>
<li><img src="img/works3.jpeg" alt="ワーク３" / class="item"></li>
<li><img src="img/works4.jpeg" alt="ワーク４" / class="item"></li>
<li><img src="img/works5.jpeg" alt="ワーク５" / class="item"></li>
<li><img src="img/works6.jpeg" alt="ワーク６" / class="item"></li>
</ul>
</section>
css
/* works */
#works {
width: 100vw;
}
.items {
display: flex;
flex-wrap: wrap;
}
#works li {
width: 32%;
max-width: 100%;
display: inline-block;
}
img {
border-style: none;
}
自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
inline-blockなども試してみたのですがダメでした。
0 likes
