<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
#wrap {
overflow: hidden;
}

#content,
#sidebar {
background-color: #eee;
}

#sidebar {
position: relative;
float: left;
width: 44px;
}

#sidebar #btn {
position: absolute;
top: 220px;
right: -20px;
width: 20px;
height: 40px;
background: red;
}

#content {
margin-left: 80px;
}

</style>
</head>

<body>
<div id="wrap">
<div id="sidebar" style="height:500px;">固定宽度区<span id="btn">点我</span></div>
<div id="content" style="height:500px;">自适应区</div>
</div>

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
var flag = 0;
$("#btn").click(function() {
if (flag == 0) {
$("#sidebar").css("width", "130px");
$("#content").css("margin-left", "166px");
flag = 1;
} else {
$("#sidebar").css("width", "44px");
$("#content").css("margin-left", "80px");
flag = 0;
}
})
</script>
</body>

</html>

一个简单的左侧固定右侧自适应demo的更多相关文章

  1. html布局,左侧固定右侧自适应

    前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...

  2. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

  3. css布局中左侧固定右侧自适应

    float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...

  4. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  5. css布局之左侧固定右侧自适应布局

    参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...

  6. CSS左侧固定右侧自适应

    方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...

  7. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  8. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  9. css左侧固定宽度右侧自适应

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

随机推荐

  1. Linux 搭建Nexus

    Linux 安装Maven和nexus代理仓库 1    说明 环境:redhat Enterprise Linux Server5.3-x64. 版本:Maven 3.0.5 ,Nexus-2.5. ...

  2. Tomcat Connector三种运行模式（BIO, NIO, APR）的比较和优化

    Tomcat Connector的三种不同的运行模式性能相差很大,有人测试过的结果如下: 这三种模式的不同之处如下: BIO: 一个线程处理一个请求.缺点:并发量高时,线程数较多,浪费资源. Tomc ...

  3. java获取服务器IP地址及MAC地址的方法

    这篇文章主要介绍了java编程实现获取机器IP地址及MAC地址的方法,实例分析了Java分别针对单网卡及多网卡的情况下获取服务器IP地址与MAC地址的相关技巧,需要的朋友可以参考下   本文实例讲述了 ...

  4. 解决java compiler level does not match the version of the installed java project facet

    在项目目录的.setting文件夹下的org.eclipse.wst.common.project.facet.core.xml中 <installed facet="java&quo ...

  5. 安卓通用shell大全

    一.[什么是shell] Linux系统的shell作为操作系统的外壳,为用户提供使用操作系统的接口.它是命令语言.命令解释程序及程序设计语言的统称.shell是用户和Linux内核之间的接口程序,如 ...

  6. Java 2D API - 2. Graphics 入门

    Java 2D API强大而复杂,不过大多时候我们只需使用java.awt.Graphcis类的部分功能.下面的内容将覆盖大多数的常见应用. Graphics 类中的方法大致可以分为两类: Draw ...

  7. hadoop 运维

    1:hdfs dfsadmin -report //查看集群运行状态

  8. 用：before ：after 来写一些小特效

    提起:before :after首先想到的是 —— 用它来去浮动来我们来换个方式玩接下来展示三种用:before :after来实现的特效 希望能起到抛砖引玉的作用 <一>第一种就是常见的 ...

  9. vs2015 企业版 专业版 密钥

    亲测可用 专业版:HMGNV-WCYXV-X7G9W-YCX63-B98R2企业版:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

  10. Android 自定义表格显示数据

    Android 自定义TextView控件,用来组成表格方便数据的展示. 首先看一下效果 样式不是很好看,需要用的可以自己优化一下. 实现方式很简单. 1.自定义控件 MyTableTextView ...