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

Question

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

pic1 pic2 pic3

pic4 pic5 pic6

pic7 pic8 pic9

.......

........

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

＆＃13;

＆＃13;

subdomain2.domain.ga

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

将width: 960px更改为max-width: 960px，页面将会流畅，看起来它会以这种方式自然地创建3行。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;