<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>DIV三列同行</title>

	<style type="text/css">

		body { margin : 0; padding : 0; color : white; text-align : center; vertical-align: middle; }

		.left { width : 200px; background-color : red; height : 100px; line-height : 100px; float : left; }

		.center { background-color : yellow; height : 100px; line-height : 100px; color : green; }

		.right { width : 200px; background-color : blue; height : 100px; line-height : 100px; float : right; }

	</style>

 </head>

 <body>

	<div class="left">位于第一行</div>

	<div class="right">位于 center 之前</div>

	<div class="center">位于 right 之后</div>

 </body>

</html>

　　

2、DIV 层的分离：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>DIV层的分离</title>

	<style type="text/css">

		body { margin : 0; padding : 0; color : white; text-align : center; vertical-align: middle;  }

		.left { width : 200px; background-color : red; height : 100px; line-height : 100px; float : left; filter:alpha(opacity=10); opacity: 0.5; }

		.center { background-color : yellow; height : 150px; line-height : 150px; color : green; }

		.right { width : 200px; background-color : blue; height : 100px; line-height : 100px; float : right; filter:alpha(opacity=10); opacity: 0.8; -moz-opacity:0.8; -khtml-opacity: 0.8;  }

	</style>

 </head>

 <body>

	<div class="left">悬浮于 center div 之上，靠左，靠上展示</div>

	<div class="right">悬浮于 center div 之上，紧贴 left div 靠左，靠上展示</div>

	<div class="center">将此 div 的高度设置为 150 像素，大于 left div 和 right div 的高度，我们可以看出，实际上此层是占据了整个一行，left div 和 right div 是悬浮在此 div 之上的；通过设置 eft div 和 right div 的背景色为透明，我们也可以看出层的分离效果。</div>

 </body>

</html>

　　

DIV三列同行的更多相关文章

  1. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  2. 一个DIV三列布局100%高度自适应的好例子（国外）

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W ...

  3. 转载 html div三列布局占满全屏（左右两列定宽或者百分比、中间自动适应，div在父div中居底）

    原文地址:http://blog.csdn.net/duyelang/article/details/20558899 <p><!DOCTYPE html> <html ...

  4. DIV左、中、右三列布局的各类情况说明

    一.中间定宽.左.右侧百分比自适应: 1.HTML代码: <div id="left"> <div id="innerLeft"> &l ...

  5. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

  6. css 三列布局

    前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中 ...

  7. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  8. DIV+CSS 网页布局之：三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

  9. DIV横向排列_CSS如何让多个div盒子并排同行显示

    如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...

随机推荐

  1. P2891 [USACO07OPEN]吃饭Dining 最大流

    \(\color{#0066ff}{ 题目描述 }\) 有F种食物和D种饮料,每种食物或饮料只能供一头牛享用,且每头牛只享用一种食物和一种饮料.现在有n头牛,每头牛都有自己喜欢的食物种类列表和饮料种类 ...

  2. Super-Resolution Restoration of MISR Images Using the UCL MAGiGAN System 超分辨率恢复

    作者是伦敦大学学院Mullard空间科学实验室成像组,之前做过对火星图像的分辨率增强. 文章用了许多的图像处理方法获得特征和高分辨率的中间结果,最后用一个生产对抗网络获得更好的高分辨率结果. 用的数据 ...

  3. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  4. 【Leetcode】Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...

  5. Linux不同发型版本(Debian REHL)与软件包管理器(RPM dpkg)的概念

    Linux的发行版本可以大体分为两类: Linux发行版 = Linux内核(类Unix内核) + Linux软件管理(package manager) 一类是商业公司维护的发行版本,以著名的Red ...

  6. P3172 [CQOI2015]选数（莫比乌斯反演）

    [题目链接] https://www.luogu.org/problemnew/show/P3172 [题解] https://www.luogu.org/blog/user29936/solutio ...

  7. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_CLR

    1.CLR简介 全称:Common Language Runtime(公共语言进行时) 属性:一种托管模块 使用对象:面向CLR的所有语言(C#.Basic.IL...) 核心功能:内存管理.程序集加 ...

  8. Luogu P1503 鬼子进村 set

    还是拿set搞... 用set记录每个被摧毁的位置,Q的时候二分一下,在和上一个摧毁的位置减一下,即可求出能到的房子数 #include<iostream> #include<cst ...

  9. HDU 3652 区间有13并且这样整除13 的数量（数位DP)

    题目:求1-n的范围里含有13且能被13整除的数字的个数. 分析: dfs(len, num, mod, flag) mod记录数字对13取余后的值 len表示当前位数 num＝＝0 不含13且上一位 ...

  10. Nand Flash 基础

    1. 根据物理结构上的区别,Nand Flash主要分为: SLC(Single Level Cell): 单层式存储 MLC(Multi Level Cell): 多层式存储 TLC(Triple ...