Question

DIV+CSS图片下文字排版 图片下面排文字

请说的详细一点 效果图

Answer 1

试试这样 图片地址自己换 li尺寸自己改下 就好了

<div class="wrap">
<ul >
<li>
<a href="#"><img src="images/jm1.jpg" /></a>
<h1>历史教学创新和实践</h1>
<p>类型：历史</p>
<p>主讲：张琪</p>
</li>
<li>
<a href="#"><img src="images/jm1.jpg" /></a>
<h1>历史教学创新和实践</h1>
<p>类型：历史</p>
<p>主讲：张琪</p>
</li>
<li>
<a href="#"><img src="images/jm1.jpg" /></a>
<h1>历史教学创新和实践</h1>
<p>类型：历史</p>
<p>主讲：张琪</p>
</li>
<li>
<a href="#"><img src="images/jm1.jpg" /></a>
<h1>历史教学创新和实践</h1>
<p>类型：历史</p>
<p>主讲：张琪</p>
</li>
<li>
<a href="#"><img src="images/jm1.jpg" /></a>
<h1>历史教学创新和实践</h1>
<p>类型：历史</p>
<p>主讲：张琪</p>
</li>
</ul>
</div>

样式：

.wrap{ margin-top:10px;}
.wrap li{ width:152px; height:128px; margin-left:8px; margin-top:10px; margin-bottom:10px; float:left; text-align:center; display:inline;}
.wrap li h1{ font-size:12px; color:#005eac; line-height:22px; text-align:center; margin-top:5px; font-weight:normal;}
.wrap li p{ color:#666; line-height:22px; text-align:center;}

Answer 2

用ul li的形式就可以