html--伪等高布局 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>伪等高布局</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            
            #wrap{
                width:750px;
                border: 1px solid;
                margin: 0 auto;
                overflow: hidden;
            }
            #wrap .left{
                float: left;
                width: 200px;
                background: pink;
              padding-bottom: 1000px;
                margin-bottom:-1000px;
            }
            #wrap .right{
                float: left;
                width: 500px;
                background: deeppink;
                padding-bottom: 1000px;
                margin-bottom:-1000px;
                
            }
            
            clearfix{
                *zoom: 1;
            }
           clearfix:after{
               content:"";
               display: block;
               clear:both;
           }
            
        </style>
    </head>
    <body>
                <div id="wrap" class="clearfix">
            <div class="left">
                无限高度 <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
            </div>
            <div class="right">
                无限宽度<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
            </div>
        </div>
    </body>
</html>
    </body>
</html>

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>伪等高布局</title><style type="text/css">*{margin:0;padding:0;}#wrap{width:750px;border: 1px solid;margin: 0 auto;overflow: hidden;}#wrap .left{float: left;width: 200px;background: pink;  padding-bottom: 1000px;margin-bottom:-1000px;}#wrap .right{float: left;width: 500px;background: deeppink;padding-bottom: 1000px;margin-bottom:-1000px;}clearfix{*zoom: 1;}           clearfix:after{           content:"";           display: block;           clear:both;           }</style></head><body><div id="wrap" class="clearfix"><div class="left">无限高度 <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br /></div><div class="right">无限宽度<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br /></div></div></body></html></body></html>

 

posted @ 2019-10-28 09:33  distant-遥远  阅读(328)  评论(0)    收藏  举报