CSS负边距自适应布局三例
单列定宽单列自适应布局：
<!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负边距自适应布局三例的更多相关文章
- css负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...
- CSS 负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"& ...
- CSS 负边距读后感
最近看到一篇讲解CSS 负边距的文章: http://segmentfault.com/a/1190000003750411?utm_source=Weibo&utm_medium=share ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...
- 浅析CSS负边距
本文主要讨论两点,1.左右负边距对元素宽度的影响:2.负边距对浮动元素的影响. 在讨论这两点前,首先要理解盒模型.文档流. 盒模型,见下图,简单明了. 文档流,将窗体自上而下分成一行行, 并在每行中按 ...
- CSS负边距margin的应用
原文 简书原文:https://www.jianshu.com/p/75a178e65207 相关文章 CSS负margin的影响:https://www.cnblogs.com/shcrk/p/93 ...
- css负边距之详解(子绝父相)
来源 | http://segmentfault.com 原文 | The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以 ...
- css 负边距 小记
水平格式化 当我们在元素上设置width的时候,影响的是内容区的宽度 但是当我们又为元素指定指定了内边距 边框 外边距 还是会增加宽度值 (IE传统盒模型 内边距 边框 会在元素的宽度内扩展 ma ...
随机推荐
- php 错误信息配置
display_errors = on/off错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利.推荐关闭此选项. ...
- Java中的成员初始化顺序和内存分配过程
Java中的成员初始化顺序和内存分配过程 原帖是这样描述的: http://java.dzone.com/articles/java-object-initialization?utm_source= ...
- DataGridView 添加行 分类： DataGridView 2014-12-07 08:49 263人阅读 评论(0) 收藏
说明: (1)dgvGoods 是DataGridView名 (2)index 是最大行索引 一. DataGridViewRow row = new DataGridViewRow(); int i ...
- 独立博客怎样申请谷歌Adsense
谷歌Adsense广告是眼下个人站长的主要赚钱途径之中的一个,首先是它相对诱人的单位价格,尽管谷歌中文广告相比英文广告单位价格有所折扣,但我的经验是仅仅要你的网页内容和广告keyword有较高的匹配性 ...
- mysql使用硬链接配合truncate 删除2.2T的表 --杨奇龙
http://blog.csdn.net/wyzxg/article/details/8626814 http://blog.itpub.net/22664653/viewspace-750408/ ...
- block没那么难（二）：block和变量的内存管理
本系列博文总结自<Pro Multithreading and Memory Management for iOS and OS X with ARC> 了解了 block的实现,我们接着 ...
- xslt语法之---position()函数
最近在学习使用XSLT,很好很强大的样式表语言.使用到了position()函数特此记录一下. position()函数--返回节点位置 语法:position() 参数:无 返回值:整数 用途:该函 ...
- urlconnection用法(转)
1.获取ip地址 package demo.net; import java.net.InetAddress; import java.net.UnknownHostException; /* * 获 ...
- Android（java）学习笔记205：网易新闻RSS客户端应用编写逻辑过程
1.我们的项目需求是编写一个新闻RSS浏览器,RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用.RSS目前广泛用于网上新闻频道,bl ...
- Sql Server 中事务（begin tran/commit tran/rollback tran）的用法
ALTER PROCEDURE [dbo].[Proc_Test_commit1] @result int output, --成功 1; 失败 0 @message nvarchar ...