前几天看到我们的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布局,左侧固定右侧自适应的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. 一个简单的左侧固定右侧自适应demo

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

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

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

  8. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

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

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

随机推荐

  1. GC算法精解（五分钟让你彻底明白标记/清除算法）

    GC算法精解(五分钟让你彻底明白标记/清除算法) 相信不少猿友看到标题就认为LZ是标题党了,不过既然您已经被LZ忽悠进来了,那就好好的享受一顿算法大餐吧.不过LZ丑话说前面哦,这篇文章应该能让各位彻底 ...

  2. 继承control的自定义TextBox

    继承control的自定义TextBox 下面来介绍一下本人写的一个自定义的textbox,首先说一下写这个控件遇到的几个难点:第一.关联输入法:第二.画字符串和焦点线 先随便上两张效果图吧: 下面这 ...

  3. [置顶] 阅读Oracle官方文档指南

    还在整理中.... EXPDP/IMPDP 相关文档:Utilities 2 Data Pump Export 3 Data Pump Import SQL*Loader 相关文档:Utilities ...

  4. hdu 1068

    找出没有缘分的同学,如果有缘分的建边, 就是求最大独立集问题了 #include<stdio.h> #include<string.h> int n,m,ma[1050][10 ...

  5. MFC控件(9):network address control

    这个控件的名字倒是取的不错,一看就知道是让你输入IP地址或host name的. 不过一打开看到那控件的样子就完全是个Edit control.不过该控件对应的类也确实是继承自类CEdit. 先拖个控 ...

  6. SQLsever2008 远程连接错误 linq

    如果你也和我一样远程连接一个sqlsever2008数据时出现类似错误 SqlException (0x80131904): 用户 ‘xxxxx' 登录失败. 首先在“服务器资源管理器”中测试一下你的 ...

  7. eclipse调试java调用matlab程序的7.17dll找不到的问题

    经过多次查找,这个问题本来很简单,在环境变量中CLASSPATH配置C:\MATLAB\R2012a\toolbox\javabuilder\jar\win64\javabuilder.jar 特别注 ...

  8. C语言之变量与常量的介绍

    一 标示符 标识符:可以理解为是变量名.名字常量表示法的常量名,但是不仅限于这两个 命名规范: 1.起名要有意义,基本要做到一看名字就知道是用来干嘛的(要求你遵守,但不会报错,希望能够养成这样的好习惯 ...

  9. Django Function Based View（FBV）和Class Based View （CBV）对比

    一.FBV处理过程 首先来看一下FBV逻辑过程: 1.简单过程(借用官方示例): urls: from django.conf.urls import url from . import views ...

  10. ThinkPhp 源码阅读心得

    php 中header 函数 我可能见多了,只要用来跳转.今天在阅读TP源码的时候发现,header函数有第三个参数.有些困惑所以找到手册查阅下,发现 void header ( string $st ...