三个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. JAVA面试题最全集

      JAVA面试题最全集 2009-01-19 15:40 3458人阅读 评论(0) 收藏 举报 java面试ejbservletstringhashmap 一.Java基础知识1.Java有那些基 ...

  2. Xcode配置SVN详细步骤

    转载:http://blog.csdn.net/weiqubo/article/details/8288635   Xcode 默认自带Git 与 SVN,我们本篇介绍SVN的详细配置步骤如下: 1. ...

  3. 一个简单的jsp+servlet登录界面的总结

    这个登录界面我是用eclipse+tomcat7来实现的(网上比较多都是用myeclipse来做的) 1.首先是关于servlet部署的问题 首先你的servlet类要写在WEB-INF的Class文 ...

  4. E. Dasha and Puzzle 数学题

    http://codeforces.com/contest/761/problem/E 给出一颗树,要求在坐标系中用平行于坐标轴的线描绘出来. 要求边不能相交,而且点的坐标唯一. 注意到2^1 + 2 ...

  5. React.js 简介

    React.js 是一个帮助你构建页面 UI 的库.如果你熟悉 MVC 概念的话,那么 React 的组件就相当于 MVC 里面的 View.如果你不熟悉也没关系,你可以简单地理解为,React.js ...

  6. 技术杂记之：vi使用入门

    对于Linux的初次使用者来说,进入Linux非图形界面后,不知道怎么创建文本(甚至于在图形界面,也找不到创建文本的菜单).其实,每一个Linux的发行版本,都包含了一个最简单.也是最基础的文本编辑器 ...

  7. 移动设备访问使用百度js跳转

    以下为代码,可放置在网站foot底部文件,或者haead顶部文件,建议将代码放在网站顶部,这样可以实现手机访问立即跳转! <script src="http://siteapp.bai ...

  8. Android 轻松实现语音朗读

    语音朗读,这是一个很好的功能,可以实现一些客户的特殊要求.在Android 实现主意功能只需要几段简单的代码即可完成. 在Android 中使用语音朗读功能 只需要使用此类 TextToSpeech ...

  9. oracle 执行跟踪

    一.sql_trace的介绍 --打开trace文件设置,把sql trace设置为true,就会在udump目录中增加一个trc文件.alter session set sql_trace=true ...

  10. 【译】x86程序员手册33-9.6中断任务和中断处理程序

    9.6 Interrupt Tasks and Interrupt Procedures 中断任务和中断处理程序 Just as a CALL instruction can call either ...