常用两列布局，多列布局和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. NameNode元数据的管理机制(三)

    元数据的管理: 第一步:客户端通过DistributedFilesystem 对象中的creat()方法来创建文件,此时,RPC会 通过一个RPC链接协议来调用namenode,并在命名空间中创建一个 ...

  2. 最精简的代理设计模式demo - 保姆看孩子

    1,协议文件 @protocol NursePtotocol <NSObject> //保姆的协议方法 - (void)startToAmuseBaby; @end 2,管理类(使用类) ...

  3. 利用多线程资源竞争技术上传shell

    通过多线程资源竞争的手段同时上传两个头像,就可以在Apache+Rails环境下实现远程代码执行.这并不是天方夜谭,同时我相信许多文件上传系统都会有这个漏洞……这是一个非常有趣的安全实验,一起来看看吧 ...

  4. Billboard

    hdu2795:http://acm.hdu.edu.cn/showproblem.php?pid=2795 题意:给一个h*w的公告牌,h是高度,w是宽度,一个单位高度1为一行,然后会有一些公告贴上 ...

  5. 通过PHP连接MYSQL数据库 创建数据库 创建表

    通过PHP连接MYSQL数据库  $conn = mysql_connect("localhost","root","password") ...

  6. ural-1099-Work Scheduling(裸带花树)

    题意: 有N个人,有限对的人可以在一起工作,问最多能有多少对. 分析: 任意图的最大匹配 // File MAXName: 1099.cpp // Author: Zlbing // Created ...

  7. 数据结构（括号序列，线段树||点分治，堆）：ZJOI 2007 捉迷藏

    [题目描述] Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由N个屋子和N-1条双向走廊组成,这N- ...

  8. Socket（TCP)客户端请求和服务端监听和链接基础(附例子)

    一:基础知识回顾 一: Socket 类 实现 Berkeley 套接字接口. Socket(AddressFamily, SocketType,ProtocolType) 使用指定的地址族.套接字类 ...

  9. java一切乱码的解释 以及源头【转】

    工作中经常遇到java编码问题,由于缺乏研究,总是无法给出确切的答案,这个周末在网上查了一些资料,在此做些汇总. 问题一:在java中读取文件时应该采用什么编码? Java读取文件的方式总体可以分为两 ...

  10. 汉洛塔递归实现的思考（C语言）

    汉洛塔是古印度神话产生的智力玩具,他的玩法是,有三个柱子分别为A,B,C,A柱上面有n个盘子上面小下面大堆叠放在一起,现在要求激将A柱上的盘子全部移到C柱上面,并且一次只能移动一个盘子,必须是小盘在大 ...