实现两(三)列等高布局的方法
第一种方法:
<style type="text/css">
*{margin: 0; padding: 0;}
#wrap{ padding-left:220px; overflow:hidden;background-color:#0ff;}
*html #wrap{ height:1%;}
#main{ float:right; margin-left:-220px; border-left:220px solid #f00; width:100%;background-color:#0ff; }
#sidebar{background-color:#f00; width:220px; float:right;
margin-left:-220px;/* 宽度大小等于边栏宽度大小*/
}
</style>
html代码:
<div id="wrap">
<div id="main">Main Content</div>
<div id="sidebar">Left Sidebar</div>
</div>
第二种方法:
<style type="text/css">
*{margin: 0; padding: 0;}
#wrap{overflow:hidden;}
*html #wrap{ height:1%;}
#main{ float:right; width:100%;background-color:#0ff;margin-left:-220px;/* 宽度大小等于边栏宽度大小*/}
#sidebar{background-color:#f00; width:220px; }
#main,#sidebar{ margin-bottom:-99999px; padding-bottom:99999px;}
</style>
html代码:
<div id="wrap">
<div id="main">Main Content</div>
<div id="sidebar">Left Sidebar</div>
</div>
优点:
可能实现多列等高布局,并且也能实现列与列之间分隔线效果,结构简单,兼容所有浏览器
缺点:
存在一个很大的缺陷,不能很好的实现边框效果。
实现两(三)列等高布局的方法相关推荐
- 利用CSS的三列等高布局
以前自己都是用JS去处理,原来用CSS也是很方便的,可以少写代码^_^ <html xmlns="http://www.w3.org/1999/xhtml"><h ...
- [html] 列举几种多列等高布局的方法
[html] 列举几种多列等高布局的方法 1, 使用table布局 `.row { display: table; }.row > * { display: table-cell; }2, 使用 ...
- html设置多列布局间隙,css设置多列等高布局的方法示例
1.真实等高布局 flex技术点:弹性盒子布局flex,默认值就是自带等高布局的特点. 定义flex布局的时候,有一些默认值. flex-direction属性定义主轴的方向.默认值为row,一般是水 ...
- css布局:多列等高布局
多列等高布局是在一个容器里面,并排的多列,如果内容的高度无法在一开始确定(例如内容是动态的),又需要让各列自然地撑开(不出现每列里面的滚动条),这时候需要用css或者js的方法把各列高度设置为最高列的 ...
- 任意列+左右两列等高布局,并要求有最小高度
高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置 ...
- 布局:多列等高布局方法
多列等高布局在实际应用中比较常见,作为面试的一个点也常遇到.做个总结. 首先想到的第一种就是 flex 和 min-height , 后朋友提醒,去掉 min-height 试试.由于align-it ...
- CSS布局——多列等高布局
先看一个案例: 左边是导航部分,右边是详细内容,两者的高度都是不固定的.左边导航栏的内容可能比右边的内容高,反之亦然.但是两者的背景颜色高度始终保持一致! 下面进入正题: 1.利用border实现 & ...
- 两栏布局,三栏布局,等高布局,流式布局
读前笑一笑: 我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办-? 她淡淡的回了句:"我就脱了上衣,然后说,别激动,是自己人"--自己人--己人-人- 两栏布局: 1. ...
- css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
文章目录 三列布局背景介绍 定位实现三列布局 浮动实现三列布局 圣杯布局 双飞翼布局 三列布局背景介绍 三列元素,左右元素固定宽度: 中间元素自适应: <div id="left&qu ...
最新文章
- 两个程序员的泰国普吉岛之行
- 分享 10 个超实用的 Python 编程技巧
- js空对象undefined测试
- 在C#中如何在客户端接收信件
- 《Objective-c》-(@property和@synsthesize)
- replaced element / non-replaced element : 内容决定
- 将终结点图添加到你的ASP.NET Core应用程序中
- distenct oracle_Oracle的distinct关键字
- JavaScript 转载
- 博弈论 —— matlab
- vue可以直接进行运算么_Vue实现计算器功能
- MySQL中的翻页优化和延迟缓存
- 编写易于调试的vc代码
- Carrot2 in action 初步印象
- markdown如何设置图片大小_Markdown 调整图片位置与大小
- amd 服务器cpu型号怎么看,怎么看CPU是几代的?intel和AMD怎么区分CPU是第几代的方法...
- 多表古典密码统计分析
- Java中四种XML解析技术之不完全测试
- 程序员吞噬零售业,成也中台败也中台 | 零售十年变迁路
- C++常见排序算法——选择排序算法
热门文章
- Jrebel 激活方式
- MyBatis 如何传递参数(全)
- 只有ajax会跨域吗_ajax解决跨域
- 本地连不上远程服务器mysql_mysql本地连不上远程
- delphi 点击wsdl出不了描述文件_iOS 13 公测版来了,安装公测版官方描述文件
- excel python插件_如何利用Excel与Python制作PPT
- unknow ’query_cache_size’报错的解决方法吗
- Gprinter Android SDK V2.1.4 使用说明
- 一步步学习微软InfoPath2010和SP2010--第十一章节--创建批准流程(8)--提交表单操作...
- 经典数字信号处理图书的个人评述【转】