#centerDIV {

height: 550px;

width: 100%;

}

#mainDIV {

height: 100%;

border: 1px solid #F00;

margin-left: 102px;

}

#leftDIV {

float: left;

width: 100px;

height: 100%;

border: 1px solid #F00;

}

<div id="centerDIV">

            <div id="leftDIV"></div>

            <div id="mainDIV"></div>

</div>

左侧leftDIV的float:left;width固定,右侧的mainDIV用margin-left

css实现左侧固定宽度，右侧宽度自适应的更多相关文章

  1. HTML和CSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

  2. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  4. CSS无序列实现表宽度自适应的表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

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

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

  7. CSS实现侧边栏固定宽度，内容栏自适应

    1,固定宽度区浮动,自适应区不设宽度而设置 margin 我们拿右边定宽左边自适应来做示范,CSS代码如下: #wrap {    overflow: hidden; *zoom: 1;  }  #c ...

  8. 在页面布局中，CSS如何实现左侧宽度固定，右侧宽度自适应的布局？

    首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <div ...

  9. HTMLCSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

随机推荐

  1. deep_learning_Function_os.makedirs()

    Python 3.2+ os.makedirs(path, exist_ok=True) python 3.2创建目录新增了可选参数existok,把existok设置True,创建目录如果已经存在则 ...

  2. ioping测试

    ioping 一个实时显示磁盘io延时的工具,以类似ping 的输出一样展示输出结果 常用参数: -c count stop after count requests. -i interval Set ...

  3. HH的项链 HYSBZ - 1878 （莫队/ 树状数组）

    HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一 段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此他的项链变得越来越长.有一天,他突然 ...

  4. Codeforces Round #454 D. Power Tower （广义欧拉降幂）

    D. Power Tower time limit per test 4.5 seconds memory limit per test 256 megabytes input standard in ...

  5. php类知识---try catch

    <?php try { echo "比赛开始"."\n"; ); } catch (Exception $e ) { echo "获取错误信息: ...

  6. php类相关知识----类常量，静态变量

    类常量 <?php class myuser { ;//定义的常量不带$符号,常量之前没有访问修饰符,常量之前没有修饰符号 public function monolog() { echo &q ...

  7. 关于 keepalived+lvs 中参数 persistence_timeout 的说明

    在keepalived+lvs的配置文件keepalived.conf中有一个选项persistence_timeout 该选项的作用:在一定时间内使来自于同一个Client的所有TCP请求被负载到同 ...

  8. Babel 转译 class 过程窥探--------引用

    // Shape 类function Shape(id, x, y) {    this.id = id;    this.setLocation(x, y);}// 设置坐标的原型方法Shape.p ...

  9. MD5 加密 字符串

    //获取字符串的MD5码 public string CreateMD5Hash(string input) { // Use input string to calculate MD5 hash S ...

  10. Navicat for MySQL 使用

    库创建标准 表查看sql样式