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#
核心C# 内容提要: 声明变量:变量的初始化和作用域:C#的预定义数据类型:在C#程序中使用条件语句.循环和跳转语句指定执行流:枚举:名称空间: Main()方法:基本命令行C#编译器选项:使用Sys ...
- struts1 logic:iterate bean:write标签使用
只是截取项目中部分代码,供参考及日后查阅 用struts1标签html:select 展现select下拉列表 刚开始为如下代码: <html:select name="Shuiwuj ...
- js中的“闭包”
js中的“闭包” 姓名:闭包 官方概念:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. ( ⊙o⊙ )!!!这个也太尼玛官方了撒,作为菜鸟的 ...
- ios学习笔记（二）之Objective-C类、继承、类别和协议
二:Objective-C类与继承和协议 在前面已经提过了对象的初始化,这里首先讲的是变量. 2.1 变量 局部变量(内部变量): 局部变量是在方法内作定义说明的,其作用域仅限于方法内,离开方法后使用 ...
- OpenCV249 for python278 最简配置方案
跟很多开源软件一样OpenCV也提供了完善的Python接口,非常便于调用.OpenCV 包含了超过 2500 个算法和函数,几乎任何一个能想到的成熟算法都可以通过调用OpenCV的函数来实现,超级方 ...
- VC++实现小托盘的处理
// 实验一Dlg.cpp : implementation file // #include "stdafx.h" #include "实验一.h" #inc ...
- Hibernate3.0中的session.find()问题
我被Session.find()的方法困扰了好几天,今天才看到新的Hibernate里没有了Session.find()方法. 现在转载在此,方便你我. 查询性能往往是系统性能表现的一个重要方面,查询 ...
- ColorMatrixFilter色彩矩阵滤镜（as3）
matrix是一个长度为4*5＝20的数组,其构成如下所示: R ,G, B, A, offset [1, 0, 0, 0, 0]); // red [0, 1, 0, 0, 0 ...
- [oc] instancetype vs id for Objective-C 【转】
原贴地址:http://blog.csdn.net/lyy_whg/article/details/12846055 http://www.iwangke.me/2013/01/06/instance ...
- MVC源码解析 - 目录
尽管MVC6和MVC4,5已经有很大不同, 但是, 作为一个普通开发人员, 还真没有资格去选择使用哪个版本. So, 尽管已经是old的版本, 还是再次花点时间去温故知新. 我记得在15年初的时候, ...