常用两列布局，多列布局和div竖直居中

body {

  margin:;

  padding:; }

.w200 {

  width: 200px; }

.mar-left200 {

  margin-left: 200px; }

.red {

  background-color: red; }

.middle {

  vertical-align: middle; }

.block {

  width: 80%;

  height: 300px;

  border: 1px solid #eee;

  margin: 0 auto; }

.content {

  width: 300px;

  height: 100px;

  background-color: #E1F9FF; }

.clearfix {

  *zoom:; }

  .clearfix:before, .clearfix:after {

    content: '';

    display: table; }

  .clearfix:after {

    clear: both; }

.layout-inline div, .layout-inline span {

  width: 200px;

  height: 300px;

  line-height: 40px;

  display: inline-block;

  background-color: #E6E6FA; }

.layout-float div {

  float: left;

  word-break: break-all;

  height: 100%; }

.layout-position .absolute {

  position: absolute;

  height: 300px; }

.layout-table {

  display: table; }

  .layout-table div {

    display: table-cell;

    text-align: center; }

.ver-position {

  border: 1px solid #eee;

  position: relative; }

  .ver-position div {

    margin: auto;

    position: absolute;

    left:;

    right:;

    top:;

    bottom:; }

  .ver-position label {

    background-color: #E1F9FF;

    position: absolute;

    left: 50%;

    margin-left: -150px;

    right:;

    top: 50%;

    margin-top: -50px;

    bottom:; }

.floater {

  float: left;

  height: 50%;

  margin-bottom: -50px; }

.cont {

  clear: both;

  position: relative;

  margin: auto; }

/*# sourceMappingURL=index.css.map */
<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>常用布局</title>

    <link href="index.css" rel="stylesheet"/>

</head>

<body>

<section class="block layout-inline">

    <div>lalala</div><!--

    --><div>lalala</div><!--

    --><div>lalala</div>

</section>

<div class="block layout-float clearfix">

    <div class="w200 red">11111111111</div>

    <div>2222222</div>

</div>

<div class="block layout-position">

    <div class="w200 absolute red">11111111111</div>

    <div class="mar-left200">2222222</div>

</div>

<div class="block layout-table">

    <div class=" w200 red">11111111111</div>

    <div>222222222</div>

    <div>33333333333</div>

</div>

<div class="block  ver-position">

    <div class="content">111111111111111111</div>

</div>

<div class="block ver-position">

    <label class="content">22222</label>

</div>

<div class="block ">

    <div class="floater">

    </div>

    <div class="content cont">Content here</div>

</div>

<div class="block layout-table">

    <div class="content middle">111</div>

</div>

</body>

</html>

常用布局，div竖直居中的更多相关文章

  1. css水平居中，竖直居中技巧（二）

    css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  2. css水平居中，竖直居中技巧（一）

    css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  3. 水平/竖直居中在旧版Safari上的bug

    今天调了两个出现在旧版Safari上的layout bug. 它们最初是在同事的iPad上被发现的, 我在自己桌面上安装的Safari 5.1.7上也能够复现. Bug1: .vertical-cen ...

  4. css水平竖直居中方式

    CSS水平和垂直居中的几种实现方法: 1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的 ...

  5. html的a标签display:block之后文字竖直居中

    设置行高和a标签的高度一样就能居中,使用line-height

  6. html 水平竖直居中

    line-height:容器高度 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. UITextField竖直居中对齐

    http://blog.sina.com.cn/s/blog_87533a0801012nv0.html 用xib生成的UITextField文字默认是水平左对齐,垂直居中对齐的,但是用代码生成的UI ...

  8. CSS -- 文字竖直居中

    元素的height 和 lineheight 设置为一样即可.

  9. Vertical Center TextView . 竖直居中的UITextView

    @interface VerticalCenterTextView : UITextView @end @implementation VerticalCenterTextView - (void) ...

随机推荐

  1. 重装Ubuntu系统并配置开发环境

    安装 Ubuntu 并配置开发环境 写一篇文章详细记录下来所有的过程,以便以后参考. 安装前的准备 备份所有代码和配置文件 备份下载的各类文件 Ubuntu 安装 下载安装 Ubuntu14.04,下 ...

  2. 【java】利用异常机制，往前台写错误信息

    有时候,程序可能会报异常,而这些异常,通常需要提示前台操作人员怎么去处理,才能完成业务. 此时,我们只需要在业务层,自己抛出一个异常,自己捕捉之后,调用下类,即可输出到前台. 1.servlet里面可 ...

  3. JS----Issue

    HTTP Post Form Data:以明文提交的,因此要加密 http://pajhome.org.uk/crypt/md5/index.html

  4. TControl的显示函数（5个非虚函数，4个虚函数）和三个例子的执行过程（包括SetParent的例子）

    // 9个显示函数 procedure SetBounds(ALeft, ATop, AWidth, AHeight: Integer); virtual; // 虚函数,important 根据父控 ...

  5. 我的VSTO之路(三)：Word基本知识

    原文:我的VSTO之路(三):Word基本知识 在前一篇文章中,我初步介绍了如何如何开发一个VSTO程序,在本文中,我将进一步深入介绍Word的插件开发.Word是一个大家在日常工作中一直接触的文档工 ...

  6. .net ref关键字在引用类型上的使用

    只接上干货. namespace ConsoleApplication1 { class Person { public string UserName { get; set; } } class P ...

  7. n数码问题， 全排列哈希

    转载了一篇关于全排列的哈希函数,Poj1077就是应用了全排列的哈希: 我们经常使用的数的进制为“常数进制”,即始终逢p进1.例如,p进制数K可表示为    K = a0*p^0 + a1*p^1 + ...

  8. poj1980

    首先想到费用流,但m<=100000还是算了吧那就感觉要用dp了,首先将a,b排序贪心一下可知,a,b的配对肯定不可能出现交叉这样就可以dp了,复杂度O(nm)还是过不去在贪心一下会发现,对于a ...

  9. 基于物联网操作系统HelloX的智慧家庭体系架构

    基于物联网操作系统HelloX的智慧家庭体系架构 智慧家庭是物联网的一个分支应用,是一个被广泛认同的巨大IT市场空间.目前市场上已经有很多针对智慧家庭的产品或解决方案,但与移动互联网不同,智慧家庭至今 ...

  10. 【转】Android与JNI(二） -- 不错

    原文网址:http://www.cnblogs.com/eddy-he/archive/2012/08/09/2629974.html 软件版本: ubuntu10.04 java version & ...