三个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. HTML_CSS入门学习

    1 HTML 简介 下面解释什么是HTML,以及HTML标签和HTML文档的含义. 1.1 什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Te ...

  2. hdu 2063 过山车 (最大匹配 匈牙利算法模板)

    匈牙利算法是由匈牙利数学家Edmonds于1965年提出,因而得名.匈牙利算法是基于Hall定理中充分性证明的思想,它是部图匹配最常见的算法,该算法的核心就是寻找增广路径,它是一种用增广路径求二分图最 ...

  3. Ignatius and the Princess III HDU - 1028 || 整数拆分，母函数

    Ignatius and the Princess III HDU - 1028 整数划分问题 假的dp(复杂度不对) #include<cstdio> #include<cstri ...

  4. 持有对方的引用&&内部类

    现在来做个很简单的东西,就是做一个做加法的图形界面 然后现在先是一个不用持有对方引用的写法: import java.awt.*; import java.awt.event.*; public cl ...

  5. Spirng MVC +Velocity 表单绑定命令对象

    通常,表单中的数据在提交之后可以通过Spring MVC的@RequestParam注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...

  6. Android开发学习——android数据存储

    Android的存储 Android中的数据存储方式及其存储位置 SharedPrefrence存储 1). 位置           /data/data/packageName/shared_pr ...

  7. CentOS 6.4 linux下编译安装 LNMP环境

    1.nginx编译安装 2.PHP编译安装 3.mysql编译安装 4.NGINX配置模板 5.CentOS 6.4 php-fpm 添加service 添加平滑启动/重启

  8. jQuery 小实例 关于按字母排序

    jQuery的强大再次不再赘述 一般情况下操作表格式数据的一种最常见的任务就是排序,在一个大型的表格中,能够对要寻找的信息进行重新排列是非常重要的,一般情况用来完成排序的方式有两种 :一种是服务器端排 ...

  9. c++ 数组长度

    数组长度求解 sizeof template <class T>int getArrayLen(T &array){ return (sizeof(array) / sizeof( ...

  10. element-ui iview-admin 都是基于vue的ui框架

    element-ui iview-admin 都是基于vue的ui框架