三个div中间自适应，两侧固定大小

<html>

	<head>

		<title>三列布局</title>

		<style type="text/css">

			body{margin:0;padding:0;text-align:center}

			/*三列的布局样式*/

				/*position:absolute定位*/

			.left2{width:200px;height:500px;background:#f0f;position:absolute;left:0;top:0}

			.middle{height:500px;background:#f00;margin:0 310px 0 210px}

			.right2{width:300px;height:500px;background:#ff0;position:absolute;right:0;top:0}

		</style>

	</head>

	<body>

	 <div class="left2">200px</div>

	 <div class="middle">ssssssssssssssssssss 三列的布局样式，两侧固定像素，采用定位的方式</div>

	 <div class="right2">300px</div>

	</body>

</html>

效果如下：

关键知识点：

利用position:absolute定位，中间div不设置宽度，中间div的margin值取决于两侧div的宽度

慕课笔记利用css进行布局【三列布局】的更多相关文章

  1. CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？

    使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...

  2. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

  3. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  4. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

  5. 慕课笔记利用css进行布局【一列布局】

    <html> <head> <title>一列布局</title> <style type="text/css"> bo ...

  6. 慕课笔记利用css进行布局【混合布局练习】

    通过学习div的布局,以一个简单的内容管理网站的布局为例子,用div+css进行简单的网页布局,加深学印象: <html> <head> <title>CSS+di ...

  7. 慕课笔记利用css进行布局【混合布局】

    <html> <head> <title>混合布局学习</title> <style type="text/css"> ...

  8. css之页面三列布局

    左右两边宽度固定,中间自适应 第一种方法:左右两边绝对定位 html代码 <div class="left"></div> <div class=&q ...

  9. css之页面三列布局之左右两边宽度固定，中间自适应

    左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...

随机推荐

  1. [POI2007]石头花园SKA

    Description Blue Mary是一个有名的石头收藏家.迄今为止,他把他的藏品全部放在他的宫殿的地窖中.现在,他想将他的藏品陈列在他的花园中.皇家花园是一个边长为1000000000单位的平 ...

  2. 题解报告：hdu 1166 敌兵布阵（线段树or树状数组）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1166 Problem Description C国的死对头A国这段时间正在进行军事演习,所以C国间谍头 ...

  3. ArrayList、HashMap 与 员工类（程序员、经理的结合使用） 相当于集合与继承的总结

    package Day28ketangzuoye; import java.util.ArrayList; import java.util.HashMap; import java.util.Map ...

  4. AJPFX:如何保证对象唯一性呢？

    思想: 1,不让其他程序创建该类对象. 2,在本类中创建一个本类对象. 3,对外提供方法,让其他程序获取这个对象. 步骤: 1,因为创建对象都需要构造函数初始化,只要将本类中的构造函数私有化,其他程序 ...

  5. LN : leetcode 312 Burst Balloons

    lc 312 Burst Balloons 312 Burst Balloons Given n balloons, indexed from 0 to n-1. Each balloon is pa ...

  6. git---安装及配置

    git官网:https://git-scm.com 安装: 官网下载->一路Next->安装完成 配置git: 1.win+r进入windows命令行 2.注册: git config - ...

  7. Java语法基础-final关键字

    final关键字主要用在三个地方:变量.方法.类. 对于一个final变量,如果是基本数据类型的变量,则其数值一旦在初始化之后便不能更改: 如果是引用类型的变量,则在对其初始化之后便不能再让其指向另一 ...

  8. VUE 入坑系列 一 基础语法

    html代码 <div id="app"> {{message}} </div> JavaScript代码 var vm = new Vue({ el: & ...

  9. ES6特性的两点分析

    块级作用域声明let.constES6中const 和let的功能,转换为ES5之后,我们会发现实质就是在块级作用改变一下变量名,使之与外层不同.ES6转换前: let a1 = 1; let a2 ...

  10. 迅为八核cortex a53开发板android/linux/Ubuntu系统

    详情请点击了解:http://www.topeetobard.com 店铺:https://arm-board.taobao.com 核心板: 提供1G和2G内存版本,全机器焊接,杜绝手工,批量无忧. ...