2019-04-09
方法之一如下：
图片及图片说明.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; 文字就居中了。
方法之一如下：
图片及图片说明.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; 文字就居中了。