多列布局在web前端开发中也是较为常见的，比如常见的三列、四列及以上，列的布局使得单一的页面可以展示更多分门别类的内容。这里会提到的多列布局有两列定宽加一列自适应、多列不定宽加一列自适应、多列等分三种。

两列定宽加一列自适应布局

本布局模式一共分为三列，其中两列宽度固定，一列宽度随内容宽度而改变。

两列定宽加一列自适应

本案例中每一列高度为自适应，即高度和内容高度一致，左列和中列宽度为100px，右列宽度为自适应，通过float浮动布局结合块级元素的特性来实现。需要注意的是背景颜色可以设置在p标签上，也可以设置在p标签上。

多列不定宽加一列自适应

这里讲解的案例为两列不定宽加一列自适应，高度自适应的布局方案，

此处多列不定宽加一列自适应

首先要理解的是不定宽，不定宽指的是列的宽度可以随时设定为其他值，这里我们可以将左列中列的宽度设置为任意值，也不会改变布局的模式，所以我们看到这个布局实现代码和上面的是一样的。需要注意的是不定宽与自适应的区别。

多列等分

多列等分布局是在页面中显示多列，这多列的宽度一致，间距一致，高度自适应，

多列等分布局简易实现

在父容器上设置margin-left为-20px，为父容器增加20px的宽度，在column容器上设置左浮动，并为每一个子容器设置宽度为父容器的25%，同时设置子容器padding-left为20px，显示方式为border-box（该现实方式显示的盒模型宽高为盒子宽高）。本方案通过将父容器宽度增加一个20px（间隔宽度），将间隔显示在子容器内部，将子容器设置为边框盒，从而实现等分布局。

本文只是列举了通过float来实现多列布局的方案，通过flex，table等也有相应的实现方案。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

以上就是前端开发中的多列布局实现方法的详细内容，更多请关注php中文网其它相关文章！

这次给大家带来在JS中实现继承有哪几种方式，在JS中实现继承的注意事项有哪些，下面就是实战案例，一起来看一下。

我们都知道，面向对象的三大特征——封装、继承、多态。 封装无非就是属性和方法的私有化，所以我们JS中提供了私有属性和私有方法。 而JS中并没有多态，因此我们说JS是一门基于对象的语言，而非面向对象的语言。 那么，面向对象三大特征中，在JS中最重要的就是继承了。

一、继承的基本概念

使用一个子类继承另一个父类，子类可以自动拥有父类的属性和方法。

>>>继承的两方，发生在两个类之间。

所以，所谓的继承，无非就是让子类，拥有父类的所有属性和方法。那么，在JS中，我们要模拟实现这一步，有三种常用的方法可以实现。

分别是：扩展Object的prototype实现继承、使用call和apply实现继承、使用原型实现继承。

二、扩展Object的prototype实现继承

扩展Object实现继承的本质，是我们自己写了一个方法，将父类的所有属性和方法通过遍历循环，逐个复制给子类。

详细步骤如下：

1：定义父类

functionParent(){}

2：定义子类

funtion Son(){}

3：通过原型给Object对象添加一个扩展方法。

Object.prototype.customExtend =function(parObj){ for(variinparObj){//通过for-in循环，把父类的所有属性方法，赋值给自己 this[i] =parObj[i]; } }

4：子类对象调用扩展方法

Son.customExtend(Parent);

三、使用call和apply实现继承

首先，要使用这种方式显示继承，我们再来回顾一下call和apply两个函数的作用：

call和apply：通过函数名调用方法，强行将函数中的this指向某个对象；

call写法：func.call(func的this指向的obj,参数1,参数2...);

apply写法：func.apply(func的this指向的obj,[参数1,参数2...]);

那么，我们使用这两个函数实现继承的思路就是：在子类中，使用父类函数调用call或apply，并将父类的this，强行绑定为子类的this。 那这样，父类绑定在this上的属性和方法，不就顺利成章的绑定到子类的this上了吗？

详细步骤如下：

1：定义父类

funtion Parent(){}

2：定义子类

functionSon(){}

3：在子类中通过call方法或者apply方法去调用父类。

functionSon(){ Parent.call(this,....);//将父类函数中的this，强行绑定为子类的this}

四、使用原型实现继承

使用原型实现继承，是比较简单而且比较好理解的一种，就是将子类的prototype指向父类的对象就可以啦。

详细步骤如下：

1：定义父类

functionParent(){}

2：定义子类

functionSon(){}

3：把在子类对象的原型对象声明为父类的实例。

Son.prototype =newParent();

五、闭包

要理解闭包，首先，我们要了解一下JS中的作用域：

1、JS中的作用域

全局变量：函数外声明的变量

局部变量：函数内声明的变量

在JS中，函数为唯一的局部作用域，而if、for等其他{}没有自己的作用域

所以，函数外不能访问局部变量。其实，变量在函数执行完毕以后，占用的内存就会被释放。

2、闭包

在概述中，我刚刚提到，面向对象的三大特征中的“封装”，我们可以用函数的私有属性来实现。这个私有属性，其实也就是局部变量。

但是我们都知道，封装是限制外部的访问，并不是直接拒绝外部的访问，那么我们在函数中私有的属性，怎么才能在外部访问呢？答案就是闭包！

JS中，提供了一种"闭包"的概念：在函数内部，定义一个子函数，可以用子函数访问父函数的私有变量。执行完操作以后，将子函数通过return返回。

代码示例：

functionfunc2(){varnum = 1;functionfunc3(){varsum = num+10; alert(sum); }returnfunc3; }varf =func2(); f();

3、闭包的作用：

① 访问函数的私有变量；

② 让函数的变量始终存在于内存中，而不被释放。

4、闭包的典型应用

我们来做这样一个功能：页面中有6个li，要求实现点击每个li，弹出这个li对应的序号。

HTML代码很简单：