方法之壹如下：
圖片及圖片說明.html 文件代碼如下：
<!doctype?html><html?lang="zh">
<head><meta?charset="utf-8">
<title>圖片及圖片說明</title>
<link?href="20130920img.css"?rel="stylesheet">
</head> <body> <dl><li><p?class="marginright"><img?class="img"?src="1.jpg"?alt="這是壹張關於X1的圖片">圖片壹</p></li>
<li><p?class="marginright"><img?class="img"?src="2.jpg"?alt="這是壹張關於X2的圖片">圖片二</p></li>
<li><p?class="marginright"><img?class="img"?src="3.jpg"?alt="這是壹張關於X3的圖片">圖片三</p></li>
<li><p><img?class="img"?src="4.jpg"?alt="這是壹張關於X4的圖片">圖片四</p></li>
<li><p?class="marginright"><img?class="img"?src="5.jpg"?alt="這是壹張關於X5的圖片">圖片五</p></li>
<li><p?class="marginright"><img?class="img"?src="6.jpg"?alt="這是壹張關於X6的圖片">圖片六</p></li>
<li><p?class="marginright"><img?class="img"?src="7.jpg"?alt="這是壹張關於X7的圖片">圖片七</p></li>
<li><p><img?class="img"?src="8.jpg"?alt="這是壹張關於X8的圖片">圖片八</p></li>
</dl> </body></html>
img.css 文件代碼如下：
body?{background:?#fff;
margin:?0?auto;
}
dl?{
margin:?0?24px;
padding:?10px;
width:?920px;?/*?這是關鍵行，控制列表總寬度?*/
}
dl?li?{
list-style-type:?none;?/*?去掉列表前的點?*/
display:?inline;/*?這是關鍵行，使列表變成內聯?*/
float:?left;/*?這是關鍵行，使內聯的列表元素全部左浮動?*/
}
dl?li?p?.img?{
width:?200px;?/*?這是關鍵行，控制圖片寬度?*/
height:?200px;
display:?block;/*?這是關鍵行，把內聯圖片變成塊級盒模型?*/
margin-bottom:?5px;/*?為塊級盒模型圖片添加5px下外邊距?*/
}
dl?li?p?{
text-align:?center;/*?這是關鍵行，控制文字居中?*/
}
dl?li?p.marginright?{
margin-right:?40px;/*?這是關鍵行，控制1?2?3?5?6?7圖片右外邊距寬度?*/
text-align:?center;
} 妳的問題困難在於HTML中為 <dl/> 列表 中的 <li/>添加合適的標簽<p/>把<li/>中的<img/>和文字包裹起來。這樣HTML就足夠結構化。
CSS中，主要解決三個問題。
1. 控制好<dl/>列表的總寬度，及各幅圖片的寬度，圖片1 2 3 5 6 7的右外邊距，就會自動換行。
1.1<dl/>左右外邊距24px ，邊框默認為0 ， 內邊距10px，寬920px，總寬988px；
1.2圖片1 2 3 4每幅圖片寬200px(高200px), 包含圖片1 2 3的<p/>每個外右邊距是40px，第壹 ?行總寬920px，<dl/>的總寬920px，所以到這裏放不下圖片，會自動換行。
1.3圖片5 6 7 8每幅圖片寬200px(高200px), 包含圖片5 6 7的<p/>每個外右邊距是40px，第二 ? 行總寬920px，<dl/>的總寬920px，這是第二行。
2. 用 display:inline; 使<dl/><li/>變成內聯顯示，再加上 float:left; 所有的<li/>就浮動起來成為壹行，但是因為以上1，我們控制了寬度，使得內聯的<li/>到了固定寬度就換行。
3. 再用display:block; 把包含“<img/>文字”的<p/>變成塊級盒模型，那麽文字就會顯示在圖片的下方，再給<p/>加上 text-align:center; 文字就居中了。