加入收藏 | 网站地图 | | RSS | WAP
你好,游客 登录 注册 搜索

css 处理左右高度不对的方法

[日期:2011-12-12] 作者: 来源: [字体: ]
我们开发时经常会碰到左右高度不对的情况,该怎么处理呢?blue1000教你用一个三列高度自适应方法来解决。
 代码如下:

<!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>css DIV三列高度自适应</title>
<style type="text/CSS">
*{padding:0;margin:0;}.main .box{float:left;width:300px;background-color:#FFF;margin-top:8px;margin-bottom:-2000px;margin-left:8px;display:inline;border:1px solid #999;padding-right:8px;padding-left:8px;padding-bottom:2000px;padding-top:8px;}.main{background-color:#CCC;overflow:hidden;width:986px;margin-right:auto;margin-left:auto;position:relative;}.main_bottom{background-color:#CCC;height:8px;width:986px;margin-right:auto;margin-left:auto;overflow:hidden;}.main .box .bottom_line{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:8px;display:inline;overflow:hidden;}.main .box .bottom_line2{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:334px;display:inline;overflow:hidden;}.main .box .bottom_line3{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:660px;display:inline;overflow:hidden;}</style>
</head>
<body>
<div class="main">
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <div class="bottom_line"></div>
  </div>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <div class="bottom_line2"></div>
  </div>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <div class="bottom_line3"></div>
  </div>
</div>
<div class="main_bottom"></div>
</body>
</html>

关键词:处理  方法  左右高度不对 

收藏 推荐 打印 | 录入:xiaolingdang | 阅读:
本文评论   查看全部评论 (0)
表情: 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事/刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款