利用CSS让dl dt dd呈现多行多列效果

HTML代码

<h3>www.865171.cn</h3>
<div id="box"> 
  <dl> 
    <dt> <img src="magicbean_070529.gif" /> </dt> 
    <dd>母亲节-祝福短信</dd> 
  </dl> 
  <dl> 
    <dt> <img src="magicbean_070529.gif" /> </dt> 
    <dd>母亲节-祝福短信</dd> 
  </dl> 
  <dl> 
    <dt> <img src="magicbean_070529.gif" /> </dt> 
    <dd>母亲节-祝福短信</dd> 
  </dl> 
  <dl> 
    <dt> <img src="magicbean_070529.gif" /> </dt> 
    <dd>母亲节-祝福短信</dd> 
  </dl> 
  <dl> 
    <dt> <img src="magicbean_070529.gif" /> </dt> 
    <dd>母亲节-祝福短信</dd> 
  </dl>   
</div>

CSS代码

<style>
*{ margin:0; padding:0;}
#box{ margin:10px; padding:10px; float:left; border:1px solid #CCC;
background:#FFFFCC; font-size:12px; line-height:1.9;}
dl{ background:#CCCC00; margin:0; width:120px;
text-align:center; float:left; margin:5px;}
dt{ background:#CC0033;}dt img{display:block;
margin:0 auto;}
dd{ background:#FFFF00; }
</style>

 

转载于:https://www.cnblogs.com/liusir/p/3299323.html