三个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. Drawable(7)让一个没有pressed状态的控件使用StateList，显示pressed图片。

    TextView没有按下状态,Button有. 如图1,内容1在一个TextView上,默认它并没有按下状态. 如何让TextView有呢. 在xml中加入属性: android:clickable= ...

  2. C. Hongcow Builds A Nation 并查集

    http://codeforces.com/contest/745/problem/C 把他们并查集后, 其他没有连去government的点,全部放去同一个并查集,然后选择一个节点数最多的gover ...

  3. 转】R利剑NoSQL系列文章 之 Cassandra

    原博文出自于: http://blog.fens.me/category/%E6%95%B0%E6%8D%AE%E5%BA%93/page/3/ 感谢! R利剑NoSQL系列文章 之 Cassandr ...

  4. AJPFX分析Android退出应用最优雅的方式

    什么是RS式呢?即Receiver+singleTask .我们知道Activity有四种加载模式,而singleTask就是其中的一种,使用这个模式之后,当startActivity时,它先会在当前 ...

  5. Windows远程桌面连接复制文件失败或非常慢

    环境搭建过程中经常会遇到需要将文件从本机传到云服务器或者企业内部服务器上的场景,此时如果文件过大的话要传个半天或者直接告诉你复制失败,让人好生无奈 ~ ~.   windows环境下,可以将本地磁盘映 ...

  6. Python学习 Day 4 函数 切片 迭代 列表生成式 生成器

    定义函数 def my_abs(x):#求绝对值的my_abs函数 if x >= 0: return x else: return –x def nop():#空函数 pass#占位符 参数检 ...

  7. 解决重置PostgreSQL 9.6密码的问题

    一.PostgreSql9.6重置密码的方法: 1.打开windows服务管理器,找到“postgresql-x64-9.6”服务,停止服务. 2.找到PostgreSQL9.6的安装目录(以我的E盘 ...

  8. tomcat不打印日志

    commons-logging.jar导入这个包到tomcat  lib下 2.修改tomcat的bin目录下面的catalina.bat文件   只需修改:set CLASSPATH=%CLASSP ...

  9. java规范与标准？

    所谓规范,即指由很多人同时遵守的行为或理论. java的规范并不是指其中一种,而是有很多种,比如java编码规范,java命名规范,java虚拟机规范等等,甚至于一个编码规范都有很多种,不同的公司.组 ...

  10. 迅为I.MX6Q开发板配不同分辨率不同尺寸液晶屏幕

    I.MX6Q开发板: 核心板参数 尺寸:51mm*61mm iMX6Q四核CPU:Freescale Cortex-A9 四核 i.MX6Q,主频 1.2 GHz iMX6DL双核CPU:Freesc ...