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

<!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"& ...

  3. CSS 负边距读后感

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

  4. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  5. css负边距之详解

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

  6. 浅析CSS负边距

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

  7. CSS负边距margin的应用

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

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

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

  9. css 负边距 小记

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

随机推荐

  1. shadowgun的飘扬旗帜shader

    MADFINGER-Lightmap-Unlit-Wind用于模拟布料和树被风吹的弯曲摆动效果 这个来自于<GPU GEMS 3>中的 “Chapter 16 Vegetation Pro ...

  2. HDOJ(HDU) 2519 新生晚会(组合公式)

    Problem Description 开学了,杭电又迎来了好多新生.ACMer想为新生准备一个节目.来报名要表演节目的人很多,多达N个,但是只需要从这N个人中选M个就够了,一共有多少种选择方法? I ...

  3. mac下的改装人生——关于mc700安装双硬盘以后的win重装问题

    宝贝到家~玩了几天,感觉神清气爽~今天正式开始准备工作了哈. 今天早上开了mac的win7系统发现了几个小问题.好吧我承认这个真的是小问题,就是我没有办法能调整屏幕的亮度了.重装了bootcamp依然 ...

  4. 局域网内linux由ip反解析主机名

  5. JSON 数据的系统解析

    - (IBAction)jsonSystemButtonDidClicked:(UIButton *)sender { self.JSONArray = [NSMutableArray array]; ...

  6. Python基础 1----Python语言基础和Python环境准备与安装

    引导语: 人们学习Python是因为他们爱这门语言,因为他们追寻美,如果我雇用一个Python程序员,那么他们的技术将非常的棒 1 Python是一门跨平台的语言,是一种面向对象的动态编程语言 发布时 ...

  7. httpd cgi程序配制+.py .cgi执行

     vi /etc/httpd/conf/httpd.conf httpd默认首页配制: DirectoryIndex index.html index.html.var 首页的位置定义: Docume ...

  8. 使用systemtap调试linux内核

    http://blog.csdn.net/heli007/article/details/7187748 http://linux.chinaunix.net/docs/2006-12-15/3479 ...

  9. 关于怎么将Quartus和Nios程序一起固化到FPGA里面

    系统:win8.1 SDK:Quartus II 14.1 FPGA:Cyclone IV 1.将Quartus生成的.pof文件(配置Flash即可自动生成,这里不讨论),与Nios生成的.elf文 ...

  10. eslint error

    暂时不想解决 报错: 3:16 error Component should be written as a pure function react/prefer-stateless-function ...