经典布局（左固定右自适应）

最简单的布局写法：

利用浮动特性，左边div固定宽度100px，右边div100%宽度。左边浮动，右边的div就会跑到左边div盒子的下面，这样就实现了左侧固定宽度，右侧自适应宽度了。装内容的话，右侧的div里再套一个div，设置margin-left:100px;。以下是代码

复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding:0;margin:0;}
        .all{
          width:100%;
        }
        .left
        {
            float:left;
            width:100px;
            height:50px;
            background:greenyellow;
        }
        .right
        {
            width:100%;
            height:50px;
            background:red;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
</body>
</html>
复制代码
posted @   大厨的笔记  阅读(162)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示