三个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. LightOj 1197 Help Hanzo （区间素数筛选）

    题目大意: 给出T个实例,T<=200,给出[a,b]区间,问这个区间里面有多少个素数?(1 ≤ a ≤ b < 231, b - a ≤ 100000) 解题思路: 由于a,b的取值范围 ...

  2. AC自动机 HDOJ 2222 Keywords Search

    题目链接 题意:每个文本串的出现次数 分析:入门题,注意重复的关键字算不同的关键字,还有之前加过的清零.   新模板,加上last跑快一倍 #include <bits/stdc++.h> ...

  3. 自定义View(12)绘制.9图片

    代码如下: // 绘制.9图片 void draw9Path(Canvas canvas){ //创建一个ninePatch的对象实例,第一个参数是bitmap.第二个参数是byte[],这里其实要求 ...

  4. html下的图片链接有边框的解决方法

    使用dreamweaver创建网页后,上传到网站发现网页的图片链接有非常难看的蓝色边框,而在dw下是没有的 后来查看了一下网上的资料,发现加一个border="0"即可,默认是有边 ...

  5. overlaps the location of another project Zendstudio导入已经存在的目录

    转 http://blog.csdn.net/kdchxue/article/details/50633745 最近弄zendstuido导入已经存在的项目,找了很多地方终于找到了导入的方法,特别记录 ...

  6. [转]在 Azure 云服务上设计大规模服务的最佳实践

    本文转自:http://technet.microsoft.com/zh-cn/magazine/jj717232.aspx 英文版:http://msdn.microsoft.com/library ...

  7. C#控件置于底层或顶层

    btn.BringToFront();//置于顶层 btn.SendToBack();//置于底层

  8. poj3368 Frequent values

    思路: 转化为RMQ. 实现: #include <cstdio> #include <cstring> #include <algorithm> using na ...

  9. CF599B Spongebob and Joke

    思路: 模拟,注意特判. 实现: #include <iostream> #include <cstdio> using namespace std; ], x[], y[], ...

  10. Windows Phone8.1应用 提交

    昨天晚上,试了试把一个WP8.1应用提交到微软商店上去,期间遇到了不少问题,搞到凌晨还没弄好.今天早上,终于把WP8.1应用成功提交上去了. 下面说说如何把WP8.1应用提交商店去.提交WP8.1以及 ...