常用两列布局，多列布局和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. python学习的一些感悟

    首先声明,这里用到的库是在coursera上学习时,老师建立的一个库 #timer import simplegui import random # global state message = &q ...

  2. 转:Google技术开发指南：给大学生自学的建议

    原文来自于:http://blog.jobbole.com/80621/ 技术开发指南 想要成为成功的软件工程师,必须拥有坚实的计算机科学的基础.本指南针对大学生,给出一条自学途径,让学生以科班和非科 ...

  3. Oracle索引扫描算法

    SQL> create table t as select * from dba_objects; Table created. SQL> create index idx_t on t( ...

  4. hdu-3046-Pleasant sheep and big big wolf(最大流最小割)

    题意: 给出最少栏杆数使狼和羊分离 分析: 将狼与源点连,羊与汇点连,容量都为无穷,将图的各个相邻点连接,容量为1 然后题目就转化成最小去掉多少条边使不连通,即求最小割最大流. // File Nam ...

  5. 【模拟】CSU 1807 最长上升子序列~ (2016湖南省第十二届大学生计算机程序设计竞赛)

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1807 题目大意: 给你一个长度为N(N<=105)的数列,数列中的0可以被其他数 ...

  6. 【模拟】Codeforces 705B Spider Man

    题目链接: http://codeforces.com/problemset/problem/705/B 题目大意: 两个人玩游戏,总共N个数,分别求前I(I=1 2 3...n)个数时游戏的获胜者是 ...

  7. HDOJ(HDU) 2123 An easy problem(简单题...)

    Problem Description In this problem you need to make a multiply table of N * N ,just like the sample ...

  8. poj 3281 最大流建图

    题目链接:http://poj.org/problem?id=3281 #include <cstdio> #include <cmath> #include <algo ...

  9. Jenkins 十一： 构建Maven项目

    1. 点击“新建”,在“Item名称”栏输入要构建的项目名,比如“Maven_project”,选择“构建一个maven项目”,点击“OK”按钮. 2. 找到“源码管理”-> “Subversi ...

  10. A - 棋盘问题

    地图看起来不太大,可以试试深搜,试一下.. 还是比较简单的搜索,竟然一下就过................... #include<stdio.h> #include<)      ...