实现简单版自适应两栏布局

二，自适应两栏布局

这篇博文里介绍了将会用到的元素和样式属性 https://blog.****.net/xnh_565175944/article/details/80468282

1.     实现效果:

实现两栏布局，且效果随着浏览器的变化会适应浏览器的变化.

2.     整体思路:

首先给2个div块级元素设置好class用来绑定样式，再通过css文件关联到两个div的class，通过设置两个div的位置和样式实现简单版的自适应两栏布局.

 

3.     设计细节:

 

(1).html设计:

设置div元素和div元素的class

 

html代码如下:

<div class="right"></div>       //设置两个div的class

<div class="left"></div>

 

(2).css设计:

首先先将所有标签的内外边距设置为0

 

*{

    margin: 0;

    padding: 0;

}

 

right样式设计

       我们设计的时候需要一个参照物，所以我们设置position为absolute，在这里的意思是相对于html文档的位置

       我们再设计它的宽和高都为100像素，背景颜色为绿色，位置为右边。

       这样right就紧紧的贴在浏览器右边了，不论浏览器怎么变大或缩小，right的大小不会改变位置也是紧贴着右上角。

.right{

    position: absolute;

    width: 100px;

    height: 100px;

    background-color:green;

    right: 0;

}

 

效果如下:

 

left设计:

       这个时候我们只需要通过参照right来设计left的位置和样式即可实现最终效果。

因为right占据了左边高100px和宽100px的位置，所以我们首先得设置一下此div的右边距为100px，这样left就会和right完全的分隔开。

这个时候只需要设置一下高度和背景颜色即可实现.

.left{

    height: 100px;

    background-color: yellow;

    margin-right: 100px;

}

最终效果: