注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

HelloWorld

echo "Hello world !"

 
 
 

日志

 
 

Li左浮动,高度自适应时错位解决方法  

2015-01-07 16:58:28|  分类: 学习笔记 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float错位</title>
<style type="text/css">
body{
 font-size:11px;
 font-family:Tahoma;
}
.prolist{
 margin:0; padding:0;
 list-style-type:none;
 width:511px;
}
.prolist li{
 float:left; width:160px;
 margin-top:20px; margin-left:6px;
}
.proimg{
 width:160px; text-align:center; height:96px;
 border:1px solid #000;
}
.proname{
 width:160px; text-align:center; margin-top:6px;
}
.c{clear:left;}
</style>
</head>

<body>
<ul class="prolist">
  <li>
    <div class="proimg">1</div>
    <div class="proname">SVC SERIES FULLY AUTOMATIC A.C VOLTAGE REGULATORSVC SERIES FULLY AUTOMATIC A.C VOLTAGE REGULATOR</div>
  </li>
  <li>
    <div class="proimg">2</div>
    <div class="proname">SVC SERIES FULLY AUTOMATIC A.C VOLTAGE REGULATOR</div>
  </li>
  <li  >
    <div class="proimg">3</div>
    <div class="proname">SVC SERIES FULLY AUTOMATIC A.C VOLTAGE REGULATOR</div>
  </li>
  <li class="c" >
    <div class="proimg">4</div>
    <div class="proname">SVC SERIES FULLY AUTOMATIC A.C VOLTAGE REGULATOR</div>
  </li>
  <li>
    <div class="proimg">5</div>
    <div class="proname">SVC SERIES FULLY AUTOMATIC A.C VOLTAGE REGULATOR</div>
  </li>
  <li>
    <div class="proimg">6</div>
    <div class="proname">SVC SERIES FULLY AUTOMATIC A.C VOLTAGE REGULATOR</div>
  </li>
</ul>
</body>
</html>

PHP做个if添加 class="c"

 
很好的方法保存下!!
 

Li左浮动,高度自适应时错位解决方法 - 北京妞儿 - 北京妞儿

Li左浮动,高度自适应时错位解决方法

  评论这张
 
阅读(382)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017