CSS自适应布局

今天小编介绍自适应布局实现方法的demo,
1)左侧固定宽度,右侧自适应,随着窗口的宽度而变化;
2)右侧固定宽度,左侧自适应;
3)中间自适应,两边定宽
1、左定宽
用左侧margin-left设为负宽度的方法,因为左侧脱离文档流,右侧宽度设为100%
效果如下:


CSS自适应布局_第1张图片
left.png

代码如下:

.head{
            display: block;
            text-align: center; 
            line-height: 50px;
            height: 40px;
            background-color: yellow;
            color: purple;
        }
        .body{
            display: block;
            height: 400px;
            width: 100%;
        }
        .left{
            float: left;
            width: 100px;
            height: 100%;
            background-color: pink;
            margin-right: -100px;
        }
        .right{
            height: 100%;
            width: 100%;
            color: white;
            background-color: lightblue;
            float: left;
            margin-left: 100px;
        }
        .foot{
            display: block;
            width: 100%;
            height: 40px;
            background-color: yellow;
            text-align: center;

        }

细节解释:line-height等于height可以使文本上下居中,如果line-height超过height,以height为准
2、右定宽
仍然采用margin方法,但这里有一个瑕疵,左侧的部分会被遮挡


CSS自适应布局_第2张图片
right.png
.right{
            float: right;
            width: 100px;
            height: 100%;
            background-color: pink;
            margin-left: -100px;
        }
        .left{
            height: 100%;
            width: 100%;
            color: white;
            background-color: lightblue;
            float: left;
        }

3、中间自适应
实现方法是,左右两边浮动,且在html中先写左右标签,后写中间标签,利用浏览器从上到下解析html标签的特点


CSS自适应布局_第3张图片
middle.png
.body{
            display: block;
            height: 400px;
            width: 100%;
        }
        
        .left{
            height: 100%;
            float: left;
            width: 100px;
            background-color: pink;
        }
        .middle{
            background-color: lightblue;
            height: 100%;
        }
        .right{
            height: 100%;
            float: right;
            width: 100px;
            background-color: lightgreen;
        }

你可能感兴趣的:(CSS自适应布局)