三个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. 贪心/思维题 Codeforces Round #310 (Div. 2) C. Case of Matryoshkas

    题目传送门 /* 题意:套娃娃,可以套一个单独的娃娃,或者把最后面的娃娃取出,最后使得0-1-2-...-(n-1),问最少要几步 贪心/思维题:娃娃的状态:取出+套上(2),套上(1), 已套上(0 ...

  2. win10系统下使用EDGE浏览器找不到Report Builder 启动图标

    Win10系统下如果要使用Report Builder,可能存在EDGE浏览器或者Chrome找不到ReportBuilder的启动图标的情况,此时,应以管理员权限运行IE浏览器,即可看到图标.

  3. 升序 Collections.sort(list) 降序 Collections.reserve(list) 随机 Collections.shuffle(list)

    package Day28ketangzuoye; import java.util.ArrayList; import java.util.Collections; import java.util ...

  4. 219 Contains Duplicate II 存在重复 II

    给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使 nums [i] = nums [j],并且 i 和 j 的绝对差值最大为 k. 详见:https://leetcod ...

  5. SQL快速备份

    ALTER  PROCEDURE [dbo].[usp_Backup_DataBase]    (      @BackupDataBaseName VARCHAR(128)    )AS    BE ...

  6. CSS综合用法

    div 居中 {position: absolute; top: 50%; left: 50%; margin-top: -180px; margin-left: -160px;}

  7. (1) Jenkins + Subversion + Maven + TestNG - 软件

    软件需求 1 Jenkins http://jenkins-ci.org/ 2 Visual SVN Server https://www.visualsvn.com/server/ 3 Tortoi ...

  8. php与其他一些相关工具的安装步骤分享

    现在很少花时间来专门写博客,都是把平时看到用到的东西像随笔一样记录在云笔记上. 在这儿分享一些php相关的技术安装过程: linux下编译安装php:php安装 phpunit安装过程:phpunit ...

  9. iOS Cell异步图片加载优化，缓存机制详解

    最近研究了一下UITbleView中异步加载网络图片的问题,iOS应用经常会看到这种界面.一个tableView上显示一些标题.详情等内容,在加上一张图片.这里说一下这种思路. 为了防止图片多次下载, ...

  10. asp 数据库 模块化 - 思路是没一个页面有一个自己的数据类 这里用nPath表示

    <!--#include file="db_class.asp" --> <% '当前页面数据 nPath = "..\..\.." 't模块 ...