简单的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 ...
随机推荐
- ListFragment和ListActivity的setOnItemClickListener不起作用
在使用ListFragment时,发现一个奇怪的问题,就是getListView().setOnItemClickListener(new OnItemClickListener...)不起作用.在s ...
- KO.js学习笔记(一)
1.官方网站:knockoutjs.com 2.要dom树加载完毕才能绑定数据 3.ui能实时更新,使用了ko的一个自定义属性:data-bind 4.可以对viewmodel中的属性添加subsci ...
- snort简介以及在Ubuntu下的安装
一.简介 Snort是一套开放源代码的网络入侵预防软件与网络入侵检测软件.Snort使用了以侦测签章(signature-based)与通信协议的侦测方法.Snort是一个免费的IDS(入侵监测系统) ...
- Haffman编码（haffman树）
Haffman编码 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 哈弗曼编码大家一定很熟悉吧(不熟悉也没关系,自己查去...).现在给你一串字符以及它们所对应的权值 ...
- 关于写的Java书籍进展
大家好,去年说要写本Java书,近期就快出版了.眼下已经開始打印样书了,最快于本月中旬左右就能够在互动网www.china-pub.com上看到消息,其它各个站点何时会发售要看详细进货情况. 去年我预 ...
- JSP 文件上传下载系列之二[Commons fileUpload]
前言 关于JSP 文件上传的基础和原理在系列一中有介绍到. 这里介绍一个很流行的组件commons fileupload,用来加速文件上传的开发. 官方的介绍是: 让添加强壮,高性能的文件到你的se ...
- wikioi-1039-数的划分
将整数n分成k份,且每份不能为空,任意两种划分方案不能相同(不考虑顺序). dp[i][j]:把数i分成k分的方案数 则:dp[i][j]=sum(dp[i-j][t])(t>=1&&a ...
- java中文乱码解决之道（一）—–认识字符集
原文出处:http://cmsblogs.com/?p=1395 沉寂了许久(大概有三个多月了吧),LZ“按捺不住”开始写博了! java编码中的中文问题是一个老生常谈的问题了,每次遇到中文乱码LZ要 ...
- 微软将Bing变开放平台 同谷歌争夺开发者
微软在编译者大会上宣布将Bing作为平台开放,此举显然旨在改变谷歌(微博)一家独大的局面. 报道称,微软知道如何创建平台.因此当它发布新平台时,都值得业界仔细关注.就在上周之前,微软Bing给大家的印 ...
- 初学springMVC搭建框架过程及碰到的问题
刚刚开始学spring框架,因为接了一个网站的项目,想用spring+springMVC+hibernate整合来实现它,现在写下搭建框架的过程及碰到的问题.希望给自己看到也能让大家看到不要踏坑. 一 ...