三个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. 数据结构 - 链栈的实行（C语言）

    数据结构-链栈的实现 1 链栈的定义 现在来看看栈的链式存储结构,简称为链栈. 想想看栈只是栈顶来做插入和删除操作,栈顶放在链表的头部还是尾部呢?由于单链表有头指针,而栈顶指针也是必须的,那干吗不让它 ...

  2. 【先定一个小目标】Ubuntu 16.04 搭建 zookeeper

    ZooKeeper 是 Apache 的一个顶级项目,为分布式应用提供高效.高可用的分布式协调服务,提供了诸如数据发布/订阅.负载均衡.命名服务.分布式协调/通知和分布式锁等分布式基础服务.由于 Zo ...

  3. 【转】Java中，&&与&，||与|的区别

    转自:http://blog.csdn.net/lishiyuzuji/article/details/8116516 在Java的逻辑运算符中,有这么四类:&&(短路与),& ...

  4. Android开发学习--MVP模式入门

    1.模型与视图完全分离,我们可以修改视图而不影响模型2.可以更高效地使用模型,因为所有的交互都发生在一个地方——Presenter内部3.我们可以将一个Presenter用于多个视图,而不需要改变Pr ...

  5. Android学习备忘笺02Fragment

    Android中Fragment可以将UI界面分成多个区块,一般静态或动态添加Fragment. 01.新建Fragment实例 一个Fragment实例包括两个部分:类对象和布局文件(可视化部分). ...

  6. AJPFX:学习JAVA程序员两个必会的冒泡和选择排序

    * 数组排序(冒泡排序)* * 冒泡排序: 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处* * 选择排序 : 从0索引开始,依次和后面元素比较,小的往前放,第一次完毕,最小值出现 ...

  7. Java编程思想总结笔记Chapter 3

    本章需要总结的不多,但细节的东西需要注意,有些很容易遗忘. 第三章 目录: 3.1 更简单的打印语句 3.2 使用Java操作符 3.3 优先级 3.4 赋值 3.5 算数操作符 3.6 自动递增和递 ...

  8. Java语法基础-异常处理

    异常处理类层次结构图 检查异常与非检查异常 非检查异常(unckecked exception):Error 和 RuntimeException 以及他们的子类.javac在编译时,不会提示和发现这 ...

  9. Node.js——环境变量

  10. 迅为7寸Android嵌入式安卓触摸屏，工业一体机方案

    嵌入式安卓触摸屏板卡介绍-工业级核心板: 嵌入式安卓触摸屏功能接口介绍: 品质保障: 核心板连接器:进口连接器,牢固耐用,国产连接器无法比拟(为保证用户自行设计的产品品质,购买核心板用户可免费赠送底板 ...