<div id="box1">

<div id="left1"></div>

<div id="right1"></div>

</div>

#box1{width:100%;height:600px;position:relative;}

#left1{margin-right:200px;border:1px solid red;height:100%;}

#right1{width:200px;height:100%;position:absolute;top:0px;right:0px;border:1px solid blue;}

CSS布局:两列,左边宽度自适应,右边宽度固定200px的更多相关文章

  1. css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  2. 如何用纯CSS布局两列,一列固定宽度,另一列自适应?

    大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...

  3. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  4. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  5. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  6. 布局两列div等高方法

    一.左右布局,左侧div绝对定位,外div相对定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. CSS实现两列布局,一列固定宽度,一列宽度自适应方法

    不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap& ...

  8. [CSS布局]3列布局:左右两列固定宽度、中间列自适应满宽

    一种常见的3列布局,左右两列固定宽度.中间列自适应满宽.整个网页不出现横向滚动条 纯CSS实现 效果图: 代码: <!DOCTYPE html> <html lang="e ...

  9. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

  10. NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

随机推荐

  1. 大商创 sql追踪 用户注册

    用户注册sql追踪 用户注册数据表 sql语句分析 ', 'wzd222@qq.com', 'addf92072794a4b668f70815672ba5c8') 主要成分: user_name,mo ...

  2. Eclipse新增Web项目

    [前置条件] 1. 电脑已安装JDK1.6,并成功配置环境变量 2. 电脑已存在tomcat6.0包,无需安装 [操作步骤] 1. 为eclipse配置tomcat6.0 (1)eclipse菜单栏, ...

  3. Python2.7的安装

    >登录python官网下载python2.7的相关版本 python官网链接 >根据平台选择相应的版本 >下载完毕后点击安装即可 >配置环境变量 >安装成功

  4. windows下nginx+php简单配置

    Nginx+php运行环境搭建 虽然目前nginx使用很广泛,在大陆主流的互联网站点或多或少会用到这个俄国人开发的小应用(占用资源小).但是我这个土鳖还是第一次自己独立配置,网上资料不少,但是还是遇到 ...

  5. TCP/IP详解--发送ACK和RST的场景

    在有以下几种情景,TCP会把ack包发出去: 1.收到1个包,启动200ms定时器,等到200ms的定时器到点了(第二个包没来),于是对这个包的确认ack被发送.这叫做“延迟发送”: 2.收到1个包, ...

  6. APP-SQLAP-10771:Could not reserve record (匹配PO时候)

    ,) SID, substr(C.SERIAL#,,) SERIAL#, substr(B.,) OBJ_NAME, C.STATUS, C.USERNAME, c.action, C.USER#, ...

  7. WITH AS的含义

    一.WITH AS的含义WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候,是为了让S ...

  8. 移动前端中viewport(视口) 转

    移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间 ...

  9. Linux多节点互信配置

    SSH互信设置步骤:   1. 每个节点上分别生成自己的公钥和私钥   2. 将各节点的公钥文件汇总到一个总的认证文件authorized_keys中   3. 将这个包含了所有节点公钥的认证文件au ...

  10. windows+caffe(四)——创建模型并编写配置文件+训练和测试

    1.模型就用程序自带的caffenet模型,位置在 models/bvlc_reference_caffenet/文件夹下, 将需要的两个配置文件,复制到myfile文件夹内 2. 修改solver. ...