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 ...
随机推荐
- Palindrome - URAL - 1297（求回文串）
题目大意:RT 分析:后缀数组求回文串,不得不说确实比较麻烦,尤其是再用线段数进行查询,需要注意的细节地方比较多,比赛实用性不高......不过练练手还是可以的. 线段数+后缀数组代码如下: ...
- thinkphp中使用PHPEXCEL导出数据
thinkphp中导出二维数组到Excel 1.解决时间长度导致EXCEL出现###问题 2.解决长数值型 带来的科学记数法导出问题 订单号不再变为科学记数法 而是直接字符串类型 代码如下: < ...
- Linux开启相关端口及查看已开启端口
防火墙层面: /sbin/iptables -I INPUT -p tcp --dport 8011 -j ACCEPT #开启8011端口 /etc/rc.d/init.d/iptables ...
- SQL 存储过程 分页 分类： SQL Server 2014-05-16 15:11 449人阅读 评论(0) 收藏
set ANSI_NULLS ON set QUOTED_IDENTIFIER ON go -- ============================================= -- Au ...
- C++ 标准时间线
Herb Sutter在他的博客上贴出了一个C++的timeline,如下所示:
- 【设计模式 - 12】之代理模式（Proxy）
1 模式简介 1.1 定义 为其他对象提供一种代理以控制对这个对象的访问.代理对象起到中介作用,可以去掉功能服务或增加额外服务. 1.2 常见的代理模式 1) 远程 ...
- [转]PHP100视频教程（2012-2013版）下载地址及密码
[转] PHP100视频教程(2012-2013版) 下载地址及其密码 先记起来,不用再到处找密码了. NO 名称 下载地址 密码 1 ［第01讲］开启PHP学习之路,融入新互联网时代 http:/ ...
- AlphaDict 软件公布
今天 Release 了 1.1. 主要是移植到了 window 平台, 无须安装,直接执行. 对 UI 又一次进行了设计,应该比之前好看多了. 加入了 生词本 功能,方便 学习外语. ------- ...
- strstr和memcmp函数的实现
#include <stdio.h> #include <stdlib.h> //malloc()函数 typedef unsigned int size_t; size_t ...
- android 37 线程通信Looper
安卓程序的主线程也叫UI线程. 工作线程和主线程的差别:安卓主线程已经调用了Looper.prepare()方法了,已经有一个MessageQueue对象了,所以才可以在工作线程用Handler发消息 ...