前端页面布局时使用float,margin,position的细节

vscode搭建前端开发|firefox 前端开发插件|合肥 前端开发 招聘信息

三列布局:实现左右两边固定宽度,中间部分页面自适应(position必须与margin配合使用,如果margin与float配合用的话会出问题
html 代码

<!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>三列布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-size: 30px;
            font-weight: bold
        }
        div {
            text-align: center;
            line-height: 50px
        }
        .left {
            width: 240px;
            height: 600px;
            background: #ccc;
            position: absolute;
            left: 0;
            top: 0
        }
        .main {
            height: 600px;
            margin: 0 240px;
            background: #9CF
        }
        .right {
            height: 600px;
            width: 240px;
            position: absolute;
            top: 0;
            right: 0;
            background: #FCC;
        }
    </style>
</head>
<body>
    <div class=”left”>left</div>
    <div class=”main”>main</div>
    <div class=”right”>right</div>
</body>
</html>

如果margin与float配合使用的话,则达不到预期的效果,由效果分析代码的问题就迎刃而解了~~~
html 代码

<!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>三列布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-size: 30px;
            font-weight: bold
        }
        div {
            text-align: center;
            line-height: 50px
        }
        .left {
            width: 240px;
            height: 600px;
            background: #ccc;
            float: left;
        }
        .main {
            height: 600px;
            margin: 0 240px;
            background: #9CF
        }
        .right {
            height: 600px;
            width: 240px;
            float: right;
            background: #FCC;
        }
    </style>
</head>
<body>
    <div class=”left”>left</div>
    <div class=”main”>main</div>
    <div class=”right”>right</div>
</body>
</html>

前端面试移动端开发|x前端开发框架|搭建前端自动化开发

» 本文来自:前端开发者 » 《前端页面布局时使用float,margin,position的细节》
» 本文链接地址:https://www.rokub.com/4985.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!