简单的CSS网页布局--三列布局
三列布局其实不难，不过要用到position:absolute这个属性，因为这个属性是基于浏览器而言，左右部分各放在左右侧，空出中间一列来实现三列布局。
(一)三列布局自适应
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三列自适应</title>
<style type="text/css">
body{
margin: 0; /*清除浏览器默认样式*/
padding: 0;
}
div{
text-align: center; /*字体居中*/
font-size: 30px;
font-weight: bold;
}
.left{
width: 30%; /*设置左边宽度为30%*/
background-color: #CCFF00;
height: 500px;
position: absolute; /*设置绝对位置*/
left: 0; /*基于浏览器而进行位置的偏移*/
top:0;
}
.middle{
height: 500px;
background-color: #57A9D1;
margin: 0 30%; /*因为左右设置了30%的宽度，固要空出来*/
}
.right{
width: 30%;
height: 500px;
background-color: bisque;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</body>
</html>
(二)三列左右固定居中
这个跟上面的代码没怎么变化，只是在宽度那里改成了具体的px值;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三列左右固定居中</title>
<style type="text/css">
body{
margin: 0; /*清除浏览器默认样式*/
padding: 0;
}
div{
text-align: center; /*字体居中*/
font-size: 30px;
font-weight: bold;
}
.left{
width: 250px; /*设置左边宽度为250px*/
background-color: #CCFF00;
height: 500px;
position: absolute; /*设置绝对位置*/
left: 0; /*基于浏览器而进行位置的偏移*/
top:0;
}
.middle{
height: 500px;
background-color: #57A9D1;
margin: 0 250px; /*因为左右设置了250px的宽度，固要空出来*/
}
.right{
width: 250px;
height: 500px;
background-color: bisque;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</body>
</html>
简单的CSS网页布局--三列布局的更多相关文章
- HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？
使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...
- css之页面三列布局
左右两边宽度固定,中间自适应 第一种方法:左右两边绝对定位 html代码 <div class="left"></div> <div class=&q ...
- CSS设计一个三列布局的页面
探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要.无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset. 01 /* 02 KISSY CSS Rese ...
- css之页面三列布局之左右两边宽度固定，中间自适应
左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...
- css之页面三列布局之左右上下高度固定，中间自适应
第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...
- [CSS布局]简单的CSS三列布局
前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...
- DIV+CSS 网页布局之：三列布局
1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
随机推荐
- C语言的本质（11）——指针与数组
1.指针数组和数组指针的内存布局 初学者总是分不出指针数组与数组指针的区别.其实很好理解:指针数组:首先它是一个数组,数组的元素都是指针,数组占多少个字节由数组本身决定.它是"储存指针的数组 ...
- 图像处理库的比较：OpenCV,FreeImage,CImg,CxImage
1.对OpenCV 的印象:功能十分的强大,而且支持目前先进的图像处理技术,体系十分完善,操作手册很详细,手册首先给大家补计算机视觉的知识,几乎涵盖了近10年内的主流算法: 然后将图像格式和矩阵运算, ...
- CentOS Linux 语言环境设置
程序运行使用一套语言需要有字符集(数据)和字体(显示),Locale是根据计算机用户所使用的语言,所在国家或者地区,以及当地的文化传统所定义的一个软件运行时的语言环境. 一.locale详解 在 Li ...
- 深入理解java String 对象的不可变性
下面我们通过一组图表来解释Java字符串的不可变性 1.声明一个String对象 String s = "abcd"; 2.将一个String变量赋值给另一个String变量 St ...
- uva 10453 - Make Palindrome(dp)
题目链接:10453 - Make Palindrome 题目大意:给出一个字符串,通过插入字符使得原字符串变成一个回文串,要求插入的字符个数最小,并且输出最后生成的回文串. 解题思路:和uva 10 ...
- SVN—怎样安装SVNserver端软件
一.怎样安装1.4.5版本号的SVNserver端软件: a.下载1.4.5版本号的SVNserver端软件.下载地址:http://download.csdn.net/download ...
- css笔记：如何让一个div居于页面正中间
如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...
- JS继承,原型继承,构造函数的继承,非构造函数"的继承
a.原型继承 一.new运算符的缺点 用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法.比如,在DOG对象的构造函数中,设置一个实例对象的共有属性species. function DOG ...
- Hadoop Eclipse远程连接出现：Error：Call to /10.10.10.10:9000 failed on local exception: java.io.EOFException
异常截图:
- some knowledge
注意 关于cornerstone无法上传library文件的问题 上面是我要添加的library文件,网上提供的方法是 在CornerStone的菜单栏里面 View->ShowIgnoreI ...