html三列布局和两列布局,CSS 常见两列布局、三列布局

一、两列布局：

方法一：采用position：absollute;并设置margin-left的值。

#left{

position:absolute;

width:300px;

top:0px;

left:0px;

background:#F00;

}

#right{

background:#0FC;

margin-left:300px;

}

左边定宽

右边自适应

方法二：采用float;并设置overflow:auto;(隐藏溢出的内容)

#left{float:left;width:300px;background-color:blue;

}#right{overflow:auto;background-color:red;

}

左边自适应

右边定宽

方法三：使用flex布局的写法

.content{display:flex;

}.aside.left{border:5px solid black;width:200px;

}.aside.main{flex-grow:1;border:5px solid red;

}.aside{height:600px;

}

二、三列布局

方法一：与两列布局类似，左右两边设置position：absolute；和top:0;left:0;right:0;

中间设置margin-left和margin-right即可.

*{padding:0px;margin:0px;

}#left,#right{position:absolute;width:300px;top:0;background-color:#0FC;

}#left{left:0;

}#right{right:0;

}#main{margin:0 300px;background-color:#999;

}

左边定宽

中间自适应

右边定宽

方法二：左右采用float,中间设置 overflow:auto;和margin:0 300px;

*{padding:0px;margin:0px;

}#left,#right{float:left;width:300px;background-color:#0FC;

}#right{overflow:auto;float:right;

}#main{margin:0 300px;background-color:#999;

}

左边定宽

右边定宽

中间自适应

方法三：使用flex布局的写法

.content{display:flex;

}.aside.left{order:1;border:5px solid black;width:200px;

}.aside.left{order:3;border:5px solid black;width:200px;

}.aside.main{order:2;flex-grow:1;border:5px solid red;

}.aside{height:600px;

}