日期:2014-05-17  浏览次数:20642 次

我想让文字在图片下边排,该怎么写这个css?
div     class= "wrapperElement ">
  <div       class= "imageElement "     onMouseover= "rattleimage(this) "   onMouseout= "stoprattle(this) "> <img   src= "img/harddisk.jpg "onClick= "secBoard( 'show   your     harddisk ', 'img/showharddisk.jpg ', 'your   options   text ') "/>
                  </div>
   
                    <div   class= "scrollIconText "> 这里是文字 </div>
        </div>
我想让文字在图片下边排,该怎么写这个css?
#icon-modules-div   .wrapperElement   {
DISPLAY:   block;   BORDER-TOP-STYLE:   none;   BORDER-RIGHT-STYLE:   none;   BORDER-LEFT-STYLE:   none;   POSITION:   absolute;   HEIGHT:   100%;   TEXT-ALIGN:   center;   BORDER-BOTTOM-STYLE:   none
}
#icon-modules-div   .imageElement   {
LEFT:   15px;   WIDTH:   50px;   BORDER-TOP-STYLE:   none;   BORDER-RIGHT-STYLE:   none;   BORDER-LEFT-STYLE:   none;   POSITION:   absolute;   HEIGHT:   35px;   BORDER-BOTTOM-STYLE:   none
}
其他两个写了,   差文字这个
是很多图片,每个图片下都有文字说明,


------解决方案--------------------
试试 ul+li的
<style type= "text/css ">
#list{margin:0; padding:0}
#list li{float:left; margin-left:5px;}
.img{height:50px; width:75px}
.img img{height:50px; width:75px}
.txt{height:23px; width:75px; text-align:center}
</style>
<ul id= "list ">
<li>
<div class= "img "> <img src= "aaa.jpg " /> </div>
<div class= "txt "> 第一张图片 </div>
</li>
<li>
<div class= "img "> <img src= "aaa.jpg " /> </div>
<div class= "txt "> 第一张图片 </div>
</li>
</ul>
------解决方案--------------------
<style type= "text/css ">
ul {margin:0; padding:0; float:left;}
ul li {margin-left:5px; text-align:center; float:left;}
ul li p {margin:5px 0;}
</style>
<ul>
<li> <img src= "aaa.jpg " /> <p> 说明 </p> </li>
<li> <img src= "aaa.jpg " /> <p> 说明 </p> </li>
</ul>