常用布局，div竖直居中

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

body {
  margin: 0;
  padding: 0; }

.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: 1; }
  .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: 0;
    right: 0;
    top: 0;
    bottom: 0; }
  .ver-position label {
    background-color: #E1F9FF;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    right: 0;
    top: 50%;
    margin-top: -50px;
    bottom: 0; }

.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>

posted on 2016-08-23 21:55 转Y身阅读(419) 评论(0) 编辑收藏举报