使用 CSS 将页面调整为 450px 时，如何更改每行中的图片数量？

Question

我可以水平对齐所有图片，但在将页面大小从 960 像素调整为 450 像素时，我很难更改页面的视图。基本上，如果我用户将页面缩小到 450px，我希望图片显示为：

pic1 pic2 pic3

pic4 pic5 pic6

pic7 pic8 pic9

.......

提前谢谢你。这是我的代码。

body{
    width:960px;
    margin:20px auto;
    overflow:auto;
    padding:25px;
}

#letters  p{
    display: inline-block;
    margin: 0 10px 0 0;
}

#letters img {
    border: 1px solid #cccccc;
}

<div id="letters">
<h3>Some pictures</h3>

<p>Pic 1<br />
<img src="./letters/a.png" width="100" height="100" />
</p>
<p>Pic 2<br />
<img src="./letters/b.png" width="100" height="100" />
</p>
<p>Pic 3<br />
<img src="./letters/c.png" width="100" height="100" />
</p>
<p>Pic 4<br />
<img src="./letters/d.png" width="100" height="100" />
</p>
<p>Pic 5<br />
<img src="./letters/e.png" width="100" height="100" />
</p>
<p>Pic 6<br />
<img src="./letters/f.png" width="100" height="100" />
</p>
<p>Pic 7<br />
<img src="./letters/g.png" width="100" height="100" />
</p>
<p>Pic 8<br />
<img src="./letters/h.png" width="100" height="100" />
</p>
<p>Pic 9<br />
<img src="./letters/i.png" width="100" height="100" />
</p>
<p>Pic 10<br />
<img src="./letters/j.png" width="100" height="100" />
</p>
<p>Pic 11<br />
<img src="./letters/k.png" width="100" height="100" />
</p>
<p>Pic 13<br />
<img src="./letters/l.png" width="100" height="100" />
</p>
<p>Pic 14<br />
<img src="./letters/m.png" width="100" height="100" />
</p>
<p>Pic 15<br />
<img src="./letters/n.png" width="100" height="100" />
</p>
<p>Pic 16<br />
<img src="./letters/o.png" width="100" height="100" />
</p>
<p>Pic 17<br />
<img src="./letters/p.png" width="100" height="100" />
</p>
<p>Pic 18<br />
<img src="./letters/q.png" width="100" height="100" />
</p>
<p>Pic 19<br />
<img src="./letters/r.png" width="100" height="100" />
</p>
<p>Pic 20<br />
<img src="./letters/s.png" width="100" height="100" />
</p>
<p>Pic 21<br />
<img src="./letters/t.png" width="100" height="100" />
</p>
<p>Pic 22<br />
<img src="./letters/u.png" width="100" height="100" />
</p>
<p>Pic 23<br />
<img src="./letters/v.png" width="100" height="100" />
</p>
<p>Pic 24<br />
<img src="./letters/w.png" width="100" height="100" />
</p>
<p>Pic 25<br />
<img src="./letters/x.png" width="100" height="100" />
</p>
<p>Pic 26<br />
<img src="./letters/y.png" width="100" height="100" />
</p>

</div>

Answer 1

将 width: 960px 更改为 max-width: 960px，页面将变得流畅，看起来会自然地创建 3 行。

body{
    max-width:960px;
    margin:20px auto;
    overflow:auto;
    padding:25px;
}

#letters  p{
    display: inline-block;
    margin: 0 10px 0 0;
}

#letters img {
    border: 1px solid #cccccc;
}

<div id="letters">
<h3>Some pictures</h3>

<p>Pic 1<br />
<img src="./letters/a.png" width="100" height="100" />
</p>
<p>Pic 2<br />
<img src="./letters/b.png" width="100" height="100" />
</p>
<p>Pic 3<br />
<img src="./letters/c.png" width="100" height="100" />
</p>
<p>Pic 4<br />
<img src="./letters/d.png" width="100" height="100" />
</p>
<p>Pic 5<br />
<img src="./letters/e.png" width="100" height="100" />
</p>
<p>Pic 6<br />
<img src="./letters/f.png" width="100" height="100" />
</p>
<p>Pic 7<br />
<img src="./letters/g.png" width="100" height="100" />
</p>
<p>Pic 8<br />
<img src="./letters/h.png" width="100" height="100" />
</p>
<p>Pic 9<br />
<img src="./letters/i.png" width="100" height="100" />
</p>
<p>Pic 10<br />
<img src="./letters/j.png" width="100" height="100" />
</p>
<p>Pic 11<br />
<img src="./letters/k.png" width="100" height="100" />
</p>
<p>Pic 13<br />
<img src="./letters/l.png" width="100" height="100" />
</p>
<p>Pic 14<br />
<img src="./letters/m.png" width="100" height="100" />
</p>
<p>Pic 15<br />
<img src="./letters/n.png" width="100" height="100" />
</p>
<p>Pic 16<br />
<img src="./letters/o.png" width="100" height="100" />
</p>
<p>Pic 17<br />
<img src="./letters/p.png" width="100" height="100" />
</p>
<p>Pic 18<br />
<img src="./letters/q.png" width="100" height="100" />
</p>
<p>Pic 19<br />
<img src="./letters/r.png" width="100" height="100" />
</p>
<p>Pic 20<br />
<img src="./letters/s.png" width="100" height="100" />
</p>
<p>Pic 21<br />
<img src="./letters/t.png" width="100" height="100" />
</p>
<p>Pic 22<br />
<img src="./letters/u.png" width="100" height="100" />
</p>
<p>Pic 23<br />
<img src="./letters/v.png" width="100" height="100" />
</p>
<p>Pic 24<br />
<img src="./letters/w.png" width="100" height="100" />
</p>
<p>Pic 25<br />
<img src="./letters/x.png" width="100" height="100" />
</p>
<p>Pic 26<br />
<img src="./letters/y.png" width="100" height="100" />
</p>

</div>

使用 CSS 将页面调整为 450px 时，如何更改每行中的图片数量？

How to change number of pictures in each row when resizing page to 450px using CSS?

html

javascript

css

xhtml