html布局,左侧固定右侧自适应
前几天看到我们的UI稿，要实现左侧固定树结构，右侧自适应。想着自己写过几次但是每次都会忘记，在这里做个笔记。
第一种方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
#wrap{
display: table;
width: 100%;
}
#wrap>div{
display: table-cell;
height: 800px;
}
#sidebar{
width: 200px;
background: red;
}
#contend{
background: blue;
} </style>
</head>
<body>
<div id="wrap">
<div id="sidebar"></div>
<div id="contend"></div> </div>
</body>
<script>
</script>
</html>
这种布局主要技术就是让div转变成table元素，让div标签拥有table，td标签的特点。
第二种方法
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--<link rel="stylesheet" href="test.css" type="text/css">-->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style rel="stylesheet" type="text/css">
html,body{
padding: 0px;
margin: 0px;
}
.one {
float: left;
height: 100px;
width: 300px;
background-color: blue;
}
.two {
overflow: hidden;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
<script>
setTimeout(function () {
$('.one').animate({width:0},500)
},500)
</script>
</html>
这种布局左侧固定栏浮动，右侧div标签设置overflow:hidden | auto；div就不会伸到左侧固定栏的下面，碰到浮动元素就会停止。因为出发了div.normalDiv的BFC特性，具体不是很了解，有兴趣的可以自行百度。这样貌似嵌套一个父级div还不用清浮动......（没有测浏览器兼容问题）
第三种方法：
以后看到了，在追加。。。。。。如过有读者测试了这两个方法，请告知兼容问题，和其他问题。多谢。
html布局,左侧固定右侧自适应的更多相关文章
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- 七种CSS左侧固定,右侧自适应两栏布局
一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...
- css布局中左侧固定右侧自适应
float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...
- css中左侧固定,右侧自适应
谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度; 2.只告 ...
- css布局之左侧固定右侧自适应布局
参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...
- 一个简单的左侧固定右侧自适应demo
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- CSS左侧固定右侧自适应
方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- css左侧固定宽度右侧自适应
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
随机推荐
- 解决MSSQL 2008不能用IP登录的问题
解决MSSQL 2008不能用IP登录的问题 前提准备:mssql 2008已安装好了一个实例(我按默认情况下安装的实例是:SQLEXPRESS),并安装了SQL Server Manag ...
- 《Head First Python》学习笔记03 异常处理
异常(运行时错误): 当代码逻辑遇到意外事件时,比如打开一个文件,却发现文件不存在.这时是增加额外的代码处理逻辑,还是捕获异常呢?答案是:Python优先推荐捕获异常,然后恢复. Python异常机制 ...
- 关于三星设备 Activity.onDestroy() 被调用。显示“开发者选项”
昨天在三星的Galaxy s4上测试自己的App时,在Activity页面间跳转的时候,第一个Activity的onDestory()总是被调用,导致从第二个Activity返回的时候,第一个Acti ...
- JDBC--手动开启Connection事务
三层架构中的业务逻辑层是处理业务逻辑的部分,很多时候需要调用多步Dao层的增删改操作,这就涉及到使用事务保证数据的一致性. Connection接口自带的事务机制需要保证多步SQL操作使用相同的连接对 ...
- 关于ECSHOP模板架设的服务器php版本过高报错的解决方法（二）
ECShop安装之后,在后台发现一个错误,这个错误提示的意思:mktime()方法不带参数被调用时,会被抛出一个报错提示. ECShop安装之后,在后台发现一个错误提示: Strict Standar ...
- ARCH-LINUX 折(安)腾(装)记
2016-08-09 前几天装的manjaro一直卡住,今天想换archlinux.... 先联个网.....wifi-menu 写入U盘 tuna 下载了ISO UltraISO 写进U盘,结果出问 ...
- SUSE Linux 下redis 的坑
前面redis服务器安装-SuSE Linux Enterprise Server 11 SP3一章中安装好提示开放防火墙后的一些坑 前面漏了说明redis作为一个高速数据库,在互联网上,对应的安全机 ...
- mysql报错1024-can't get hostname for your address
前一段时间mysql用的好好的,突然一天,mysql启动后,在使用navicat连接数据库的时候 报错1024-can't get hostname for your address 这里我是这样解决 ...
- Word 文字转表格
今天工作的时候遇到一个问题,需要整理出一个工程下依赖的jar的名称和大小,并且按照大小排序,我在使用一个java程序打印出名称和大小之后,需要将这些文字整理到word文档表格中,刚开始是想一个个的拷进 ...
- 简单的HTML注册界面
<html><head><title>我的第一个HTML页面</title></head><body><center> ...