一个三列margin布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,body{margin: 0;height: 100%;}    
            /*不加html会出现中间内容区域高度塌陷*/
            .left, .right{
                float: left;
                height: 100%;
                width: 200px;
            }
            .left{background-color: #FF8C00;margin-left: -100%;}
            .right{background-color: lightpink;margin-left: -200px;}
            .far-box{width: 100%;height: 100%;float: left;}
            .son-box{margin: 0 210px;background-color: #1E90FF;height:100%;}
        </style>
    </head>
    <body>
        <div class="far-box">
            <div class="son-box">我是内容部分</div>
        </div>
        
        <div class="left">我是左边部分</div>
        <div class="right">我是右边部分</div>
        
    </body>
</html>

这个布局的原理有点不懂，详细解释一下

西兰花伟大炮

浏览 1358回答 1

1回答

田心枫

又在装！html+css 有啥不懂的？

0 0

随时随地看视频慕课网APP