布局技巧

div内文本太长截断不换行末尾补充省略号

width:230px;overflow: hidden;text-overflow:ellipsis; white-space:nowrap;

清除浮动

.clear{
 clear:both;
}
.clearL{
 clear:left;
}
.clearR{
 clear:right;
}

 

信息块 头部两端对其 图片文字居中对齐

< style  type ="text/css" >
.tjsp  { width : 270px ;   margin-left : 7px ;  float : left ; background : #EFEFEF ;  padding : 3px ;  border : 1px solid red ;   }
.tjsp .header {  font-size : 14px ;  font-weight : bold ;   }
.tjsp .header img {  vertical-align : middle ; }
.tjsp .title  { float : left ; }
.tjsp .more  { float : right ; }
</ style >
< div  class ="tjsp" >
             < div  class ="header" >
                 < span  class ="title" >
                     < img  src ="tjsp-car5.gif"   />
                    特价商品 </ span >   < span  class ="more" > 更多>>
                         < img  src ="tjsp-5sen.gif"   />
                     </ span >
             </ div >
   
</ div >