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;

}

html三列布局和两列布局,CSS 常见两列布局、三列布局相关推荐

响应式布局html像素值计算,CSS Calc()：制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
css实用技巧：巧用css实现两栏等高布局
又到了利用碎片学习的时间了,看看这个小案例,超级实用的一个css技巧:css实现两栏等高布局. 样式方面: <style> #box{ width:900px; font-size:28p ...
css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...
css 商城两列_css大法之使用伪元素实现超实用的图标库（附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
matlab累加数组的前n行,有一组m行n列的数组，在matlab中如何编程，每三个数求一次平均数（行与列分别求）？...
有一组m行n列的数组,在matlab中如何编程,每三个数求一次平均数(行与列分别求)? 关注:216 答案:3 手机版解决时间 2021-03-05 21:45 提问者繁华落尽 2021-03- ...
css 商城两列_你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...

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

html三列布局和两列布局,CSS 常见两列布局、三列布局相关推荐

最新文章

热门文章