常用两列布局，多列布局和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. linux中bin和xbin下可执行程序的区别

    /bin下的都是Linux最基础的,所有用户都可以使用的外部命令 /sbin下的都是只有超级用户root才能使用的.管理Linux系统的外部命令 /usr/bin以及/usr/local/bin下的都 ...

  2. GNU project C

    gcc - GNU project C and C++ compiler   gcc [option] file...            preprocessing         compila ...

  3. session和cookie详解2

    http 之session和cookie http://www.cnblogs.com/ForEverKissing/archive/2008/05/23/1205503.html Session简介 ...

  4. 老毛桃U盘启动盘制作工具V20140501完美贡献版

    老毛桃U盘启动盘制作工具V20140501完美贡献版 下载地址:http://down.laomaotao.net:90/LaoMaoTao_V2014zhuangji.exe 老毛桃U盘装系统综合教 ...

  5. Pie（二分）

    ime Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8930   Accepted: 3235   Special Judge De ...

  6. hdu-2586-How far away ？(离线LCA)

    题意: 给定一棵树,每条边都有一定的权值,q次询问,每次询问某两点间的距离. 分析: 这样就可以用LCA来解,首先找到u, v 两点的lca,然后计算一下距离值就可以了. 这里的计算方法是,记下根结点 ...

  7. 不成功的TCA代码

    %--brain mask with the brain tissue mask_name = 'C:\Users\Administrator\Desktop\workspace\preprocess ...

  8. 【动态规划】Vijos P1143 三取方格数（NOIP2000提高组）

    题目链接: https://vijos.org/p/1143 题目大意: NxN的矩阵,每个值只能取一次,从(1,1)走到(n,n)走三次能取得的最大值. 题目思路: [动态规划] f[x1][y1] ...

  9. QT5.7.0在win10下使用visual studio 2015编译（目标平台 xp）

    环境:win10+vs2015+QT5.7.0 目标:编译出能在windows xp上运行的QT 通过baidu和bing找出来的结果没有一个能成功运行,大部分都能编译成功,并完美解决“exe不是有效 ...

  10. POJ 2057 The Lost House

    题意:一只蜗牛,它的房子在树上的某个叶子节点上,它要从树的根节点出发,寻找自己的房子.树的任意两个节点的距离为1,房子出现在每个叶子节点上的可能性一样.有的节点上有虫子,如果有虫子,虫子会告诉蜗牛它的 ...