单列定宽单列自适应布局：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <title>单列定宽单列自适应布局</title>

    <style type="text/css">

        * {margin:0;padding:0;}

        .cont, .side {float:left;}

        .cont {width:100%;}

        .main {margin-right:200px;background:#DDDDDD;}

        .side {margin-left:-200px;width:200px;background:#F7F7F7;}

    </style>

</head>

<body>

    <div class="cont">

        <div class="main">main</div>

    </div>

    <div class="side">side</div>

</body>

</html>

　　左右定宽中间自适应布局：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <title>左右定宽中间自适应布局</title>

    <style type="text/css">

        * {margin:0;padding:0;}

        .cont, .side, .sub-main {float:left;}

        .cont {width:100%;}

        .main {margin-right:200px;margin-left:300px;background:#DDDDDD;}

        .side {margin-left:-200px;width:200px;background:#F7F7F7;}

        .sub-main {margin-left:-100%;width:300px;background:#F7F7F7;}

    </style>

</head>

<body>

    <div class="cont">

        <div class="main">main</div>

    </div>

    <div class="side">side</div>

    <div class="sub-main">sub-main</div>

</body>

</html>

　　两列等高自适应布局：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <title>两列等高自适应布局</title>

    <style type="text/css">

        * {margin:0;padding:0;}

        .layout {overflow:hidden;}

        .cont, .side {float:left;padding-bottom:9999px;margin-bottom:-9999px;}

        .cont {width:100%;}

        .main {margin-right:200px;background:#DDDDDD;}

        .side {margin-left:-200px;width:200px;background:#F7F7F7;}

    </style>

</head>

<body>

    <div class="layout">

        <div class="cont">

            <div class="main">

                main

                <br/><br/><br/><br/><br/><br/><br/>

            </div>

        </div>

        <div class="side">side</div>

    </div>

</body>

</html>

　　

CSS 负边距自适应布局的更多相关文章

  1. css负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...

  2. CSS负边距自适应布局三例

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...

  3. CSS 负边距读后感

    最近看到一篇讲解CSS 负边距的文章: http://segmentfault.com/a/1190000003750411?utm_source=Weibo&utm_medium=share ...

  4. css负边距之详解

    自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...

  5. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  6. CSS负边距margin的应用

    原文 简书原文:https://www.jianshu.com/p/75a178e65207 相关文章 CSS负margin的影响:https://www.cnblogs.com/shcrk/p/93 ...

  7. css负边距之详解(子绝父相)

    来源 | http://segmentfault.com 原文 |  The Definitive Guide to Using Negative Margins   自从1998年CSS2作为推荐以 ...

  8. css 负边距 小记

    水平格式化 当我们在元素上设置width的时候,影响的是内容区的宽度  但是当我们又为元素指定指定了内边距 边框 外边距 还是会增加宽度值  (IE传统盒模型 内边距 边框 会在元素的宽度内扩展 ma ...

  9. 浅析CSS负边距

    本文主要讨论两点,1.左右负边距对元素宽度的影响:2.负边距对浮动元素的影响. 在讨论这两点前,首先要理解盒模型.文档流. 盒模型,见下图,简单明了. 文档流,将窗体自上而下分成一行行, 并在每行中按 ...

随机推荐

  1. [转]为什么python标准库没有实现链表

    实际上刚开始学习一些高级语言的时候我也有同样的疑问,而且即使有链表对应物的语言,链表常常也很少被实际使用.如果是在国外听数据结构的课,老师一般会警告你这只是一个理论概念,实际应用应该实际考察,在通常情 ...

  2. J2EE综合：如何处理大数据量的查询

    在实际的任何一个系统中,查询都是必不可少的一个功能,而查询设计的好坏又影响到系统的响应时间和性能这两个要害指标,尤其是当数据量变得越来越大时,于是如何处理大数据量的查询成了每个系统架构设计时都必须面对 ...

  3. 【高性能服务器】Tomcat剖析

    引言 Tomcat是一个流行的servlet容器,对于开发人员来说整体和容器打交道有必要花一些时间爱你了解其内部结构.本文将从一下几个方面来剖析其内部结构. 整体结构 连接器 初始化过程 如何处理一个 ...

  4. 序列化和反序列化（C#）

    有时候我们希望把类的实例保存下来,以便以后的时候用.一个直观的方法就是StreamWriter把类写成一行,用\t分隔开每个属性,然后用StreamReader读出来. 但是这样太麻烦,代码行数较多, ...

  5. procedure的over(partition by ) function

    转载自:http://www.2cto.com/database/201310/249722.html oracle的分析函数over(Partition by...)   Sql代码       o ...

  6. sqlserver 理解文件和文件组

    在sqlserver中,数据库在硬盘的存储方式和普通文件存储一样,仅仅几个文件而已,sqlserver通过管理逻辑上的文件组的方式来管理存储数据的文件, 如图: 文件组管理着磁盘上的文件,而文件中存放 ...

  7. Apache优化：修改最大并发连接数

    http://www.365mini.com/page/apache-concurrency-configuration.htm Apache是一个跨平台的web服务器,由于其简单高效.稳定安全的特性 ...

  8. mysql安全

    安装MySql时,尽量选择别的端口(默认是3306),密码设复杂一点!在next的步骤中,注意不要选中"允许远程登录". Web漏洞检测及修复 http://wiki.open.q ...

  9. IOS-UI-UIDynamic（二）

    UIPushBehavior :推动效果 UIAttachmentBehavior:附着效果 UISnapBehavior:迅速移动效果 一.重要的属性 UIPushBehavior :推动效果 ty ...

  10. java守护线程（后台线程）

    /*1.让各个对象或类相互灵活交流2.两个线程都冻结了,就不能唤醒了,因为根据代码要一个线程活着才能执行唤醒操作,就像玩木游戏3.中断状态就是冻结状态4.当主线程退出的时候,里面的两个线程都处于冻结状 ...