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

<!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. supervisor tornado 多进程多端口配置

    base: nginx tornado 目标: tornado 实现多端口多进程运行 pip install supervisor echo_supervisord_conf > /etc/su ...

  2. 关于MapReduce

    MapReduce是Google提出的一个软件架构,用于大规模数据集(大于1TB)的并行运算.概念“Map(映射)”和“Reduce(归纳)”,及他们的主要思想,都是从函数式编程语言借来的,还有从矢量 ...

  3. C语言的一些误用和知识总结

    现在学嵌入式的话,最主要是要把C语言熟悉,比如指针,链表,共用体,结构体等,还是得听老师的话.. 在学习单片机的时候才真正知道C语言是什么它是来干什么的~但是C语言用到嵌入式只是它小小的一部分他的应用 ...

  4. 使用GitHub进行协同项目开发和开源项目贡献

    本教程致力于摆脱git命令行快速的学习使用GitHub. 此次是GitHub课程的第三次课程,也是最后一次课程.推荐进行按照次序查看本次教程.上篇文章:程序员,一起玩转GitHub版本控制,超简单入门 ...

  5. Java 简单算法--排序

    1. 冒泡排序 package cn.magicdu.algorithm; public class BubbleSort { public static void main(String[] arg ...

  6. C# 编写短信发送Window服务

    我们做项目过程中,一般都会有发送短信的需求.最常见的就是户注册或者登录时发送短信验证码.不同类型的短信发送,我们都可以放到到一张短信表中,然后通过一个定时的作业去执行短信发送.而定时作业的执行,我们就 ...

  7. items 与iteritems

    dict的items函数返回的是键值对的元组的列表,而iteritems使用的是键值对的generator. items当使用时会调用整个列表 iteritems当使用时只会调用值. >> ...

  8. Java多线程概述

    /*多线程1.首先说进程,进程---就是正在进行的程序    每一个进程都有一个执行程序.该顺序是一个执行路径,或者叫一个控制单元 2.线程:就是进程中的一个独立的进程单元        线程在控制着 ...

  9. bash 脚本

    一.英文版 1.Advanced Bash-Scripting Guide 二.中文 1.BashGuide for Beginners 中文版

  10. indeed 第二次笔试题

    1. Maximal Values 很简单,从前往后扫,找满足的,O(n),很容易就过掉了. maxn = 100. 没啥难点. 2. Bi-gram 用map统计个数,从前往后扫,每2个字符作为一个 ...