A-A+

左右两侧同高

2016年01月25日 htmlcss 暂无评论 阅读 115 次

左右两侧同高;padding-bottom: 5000px;margin-bottom: -5000px;

这不是自适应的高度,只是利用了overflow:hidden来隐藏两边div的多余部分。他给左右两个div分别设置了一个3000像素高的空白占位高度,把整个div往上挤了3000像素,然后又通过负的margin把div往下挪3000像素。当中间的div高度到了3000以上的时候(准确的说是比两边div内部除了padding之外的高度多3000以上),左右两边的div高度可能就不够了,会比中间矮。
真正的自适应要用javascript。

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>   padding-bottom: 5000px;
        margin-bottom: -5000px;用法</title>
    <style>
        .left{float:left;width:300px;background: indianred;padding-bottom: 5000px;margin-bottom: -5000px; }
        .right{float:left;width:300px;background:#AAA;}
        .content{ background: #2c9ae2;width:610px;overflow: hidden}
    </style>
</head>
<body>
    <div class="content">
        <div class="left">
            <p>
                padding-bottom: 5000px;
                margin-bottom: -5000px;
                margin-bottom: -5000px;
              </p>
        </div>
        <div class="right">
            <p>   padding-bottom: 5000px;
                margin-bottom: -5000px;
                padding-bottom: 5000px;
                             padding-bottom: 5000px;
        x;
                padding-bottom: 5000px;
                margin-bottom: -5000px;
                margin-bottom: -5000px;
                padding-bottom: 5000px;
                margin-bottom: -5000px;
            </p>

        </div>
    </div>


</body>
</html>
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录