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行为实现: 仔细分析试题要求,要达到 ...
随机推荐
- C#执行cmd命令
public class Console : IRun { public Console(){ ; } public string Result { get; set; } public string ...
- 数据结构之树（Tree）(一) ：树
ps:好久没用动手写blog了,要在这条路上不断发展,就需要不停的学习,不停的思考与总结,当把写blog作为一种习惯,就是自我成长的证明,Fighting!. 一.简介 树是一种重要的非线性数据结构, ...
- WCF服务属性注入基础设施
WCF服务属性注入基础设施 WCF的服务的创建行为:使用默认构造函数创建WCF服务对象.如果我们想要在WCF内使用外部对象,最简单的方式就是把外部对象做成全局对象.然而这样的话会增加全局对象的数量,让 ...
- 挖一下插件v1.3版本发布
Chrome图片下载插件,支持网页截屏 v.1.3更新说明: 新增屏蔽图片功能,可以将不想看到的图片隐藏 新增屏蔽图片管理选项,可以根据实际的需求取消屏蔽图片 优化操作界面 项目地址:https:// ...
- Linux kill, killall, kill -9
tyle="margin: 20px 0px 0px; font-size: 14px; line-height: 26px; font-family: Arial;"> 附 ...
- ACE 容器之三 ACE_Unbounded_Queue的使用
以下代码演示了如何在ACE_Unbounded_Queue这个队列容器中存储具体的数据元素和数据元素的指针. // ACEqueue.cpp : Defines the entry point for ...
- mysql基础：数据库的创建，增删改查
=============查看数据库========================== 使用SHOW语句找出服务器上当前存在什么数据库: mysql> SHOW DATABASES; +--- ...
- 巧用final
1.final可以修饰函数的参数,以防止函数内部随意篡改不允许修改的参数. 2.在函数内部,把函数的局部变量声明为final类型,可以检查在函数内部它们是否的确只被赋值一次.
- ajax的分页查询（不刷新页面）
既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数 ...
- Hexo+NextT第三方服务调用【4】
该系列博客列表请访问:http://www.cnblogs.com/penglei-it/category/934299.html 摘要 静态站点与动态站点有很大的不一样,它拥有一定的局 ...