常用两列布局，多列布局和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. spoj 2319 BIGSEQ - Sequence

    You are given the sequence of all K-digit binary numbers: 0, 1,..., 2K-1. You need to fully partitio ...

  2. [Usaco2006 Dec]Milk Patterns

    [Usaco2006 Dec]Milk Patterns Description 农夫John发现他的奶牛产奶的质量一直在变动.经过细致的调查,他发现:虽然他不能预见明天 产奶的质量,但连续的若干天的 ...

  3. 批处理文件的@echo off是什么意思?

    @echo off 关闭回显 @echo on 打开回显 @echo off并不是DOS程序中的, 而是DOS批处理中的. 当年的DOS,所有操作都用键盘命令来完成, 当你每次都要输入相同的命令时, ...

  4. 新建maven project遇到的问题

    在m2e安装成功之后,开始创建maven project了,但是出现了如下错误: 结果在很偶然的情况下让我解决了,就是更新下m2.respository,点击下图中的Update Settings -

  5. [BZOJ 3236] [Ahoi2013] 作业 && [BZOJ 3809] 【莫队（+分块）】

    题目链接: BZOJ - 3236   BZOJ - 3809 算法一:莫队 首先,单纯的莫队算法是很好想的,就是用普通的第一关键字为 l 所在块,第二关键字为 r 的莫队. 这样每次端点移动添加或删 ...

  6. Unity NGUI 网络斗地主 -制作图集 Atlas

    Unity NGUI 网络斗地主 -制作图集 Atlas by @杨海龙 开发环境   Win7+Unity4.2.1f4+NGUI 3.0.4版本 这一节告诉大家如何制作(图集)Atlas! 1.首 ...

  7. Zabbix的LLD功能--Low-level discovery

    感觉这个主题是和一个主题是一个系列,而且更基础. 准备深入研究一下... 相关文档准备: https://www.zabbix.com/documentation/2.0/manual/discove ...

  8. Content related to smartcards (and RFID/NFC)

    Introduction Add your content here. ISO/IEC 7816 Contact Cards Hardware EMV payment cards Orange Cas ...

  9. 深入浅出 Java Concurrency (3): 原子操作 part 2

    转:http://www.blogjava.net/xylz/archive/2010/07/02/325079.html 在这一部分开始讨论数组原子操作和一些其他的原子操作. AtomicInteg ...

  10. java学习之面向对象概念

    思考的两种方式: 举例: 把大象放到冰箱里 一.面向过程 :[打开冰箱->把大象放里面->关上冰箱门]面向过程注重的是过程,也就是(动作[函数]),然后按照动作依次去执行就好了. 代表语言 ...