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

<!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. HTTPS协议学习总结

    目录 一:什么是HTTPS协议?二:客户端与服务端如何建立HTTPS协议连接?三:证书.加密协议.信息摘要.签名算法概念解释与关系梳理四:低版本操作系统作为客户端发送HTTPS失败分析五:参考资料   ...

  2. Bootstrap--组件之Glyphicons字体图标

    Glyphicons 字体图标 所有可用的图标 包括250多个来自 Glyphicon Halflings 的字体图标.Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bo ...

  3. Linux find常见用法示例

    find命令的参数: pathname: find命令所查找的目录路径.例如用.来表示当前目录,用/来表示系统根目录.-print: find命令将匹配的文件输出到标准输出.-exec: find命令 ...

  4. 怎样向IT行业的朋友说明《圣经》的重要性

    “世界的官方文档”——怎么样?

  5. hanoi双塔

    汉诺塔,经典的递归. 经典的汉诺塔游戏相信很多同学都会玩的,规则就不用赘述,百科一下就OK.有三个柱子A,B,C,A柱子上套有n个大小不等的盘子,任意两个盘子,上面的盘子一定小于下面的盘子.现在请你编 ...

  6. 第32条：用EnumSet代替位域

    如果一个枚举类型的元素主要用在集合中,一般使用int枚举模式,将2的不同倍数赋予每个常量: public class Text { public static final int STYLE_BOLD ...

  7. nodejs的调试

    js的调试始终是一个比较麻烦也是比较困难的事情,从最原始的alert调试,到火狐的firebug工具,在到后来各个浏览器厂商的调试工具.调试工具的发展历程,也可以看出由JS构建的业务和技术逻辑越来越复 ...

  8. 基于libuv库的UDP收/发广播消息代码实现

    uv_send(发送端): #include "uv.h" #include "task.h" #include <stdio.h> #includ ...

  9. poj 2533 Longest Ordered Subsequence 最长递增子序列

    作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4098562.html 题目链接:poj 2533 Longest Ordered Subse ...

  10. leetcode Largest Rectangle in Histogram 单调栈

    作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4052343.html 题目链接 leetcode Largest Rectangle in ...