谈谈我开始出来工作时候的一道面试题吧

当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div

        1.只告诉你宽度;       2.只告诉你高度;       3.宽度和高度告诉你;(我总结了可能的3种方式)
        HTML:
<div class="container">
<div class="left">左侧固定宽度200px</div>
<div class="right">右侧自适应</div>
</div>
        No1:方法一
.container{width: 100%; }
.left{color:red; background: gray; float: left; height: 100px}//左侧的div
.right{color:red; background: blue; margin-left: -200px;}//右侧的div

No2:方法二

.container{width: 100%;}
.left {width:200px; background:#fcc; position:absolute; left:0 ;z-index:1 }
.right {width:100%; background:#ccc; position:absolute; left:}

       No3:方法三

.container{width:100%}
.left { background-color: green; float: left; width: 200px; margin-right: -100%; }
.right { float: left; width: 100%;margin-left: 200px; background-color:blue; }

No4:方法四

.container{width:100%}
.left{position: absolute; top:; left:; width:200px; background: #ff0;}
.right{ margin-left: 200px; background: #f0f;}

No5:方法5

.container{width:100%}
.left{ position: absolute; top:0 ; left:0 ;width:200px; background:blue;}
.right{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:;background:red ;}

其实还有很多方法可以实现(其它的我就懒得写了),所谓条条大路通罗马,咳咳,不喜勿喷

css中左侧固定,右侧自适应的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. css实现左侧固定宽,右侧自适应的7中方法

    一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...

  9. CSS 实现左侧固定,右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

随机推荐

  1. PHP将图片二进制转换

    http://www.360doc.com/content/14/0325/10/947551_363526874.shtml

  2. linux ‘|’ 与重定向 实例详解

    重定向与管道 ----------小命令大作为 >:重定向标准输入出定向命令 用的最多的就是向某个文件中写入内容 [root@localhost ~]# echo "Hello,wor ...

  3. 闲的写写SQL

    /* 新增 */ Create Proc AddData ( ), ), @Values nvarchar(max) ) as declare @Sql nvarchar(max) declare @ ...

  4. EX14 彩票中奖 (lottery.pas/c/cpp)

    [题目描述]小明想试试运气去购买彩票,所以他开始研究彩票大乐透的玩法:超级大乐透是指由购买者从01—35共35个号码中选取5个号码为前区号码,并从01—12共12个号码中选取2个号码为后区号码组合为一 ...

  5. 让Xcode 8.x能够调试iOS 7.x真机

    首先需要 Xcode 7.x.可以去 苹果开发者官网 下载. 打开Finder, 进入文件夹: Xcode .x.app/Contents/Developer/Platforms/iPhoneOS.p ...

  6. eclipse绘制activiti无法生成图形

    今天使用eclipse绘制acitiviti,发现无法绘制图形,设置里面勾选也勾选了,同时activiti插件也是最新的,最后发现同时打开了两个eclipse窗口就不支持生成图形,看来只能开一个窗口了 ...

  7. Dom 概览

    前言 我们已经接触并使用了很多api去操作html文档,例如:appendChild,getElementById, 等等.但是,每当我在浏览器输入document,window 按下回车,会发现还有 ...

  8. 动态代理proxy与CGLib的区别

    什么是代理? 静态代理与动态代理 静态代理实例 JDK动态代理实例 CGLib 简介 CGLib 与JDK动态代理的区别 代理模式是Java中常见的一种模式,英文名字叫走Proxy或者Surrogat ...

  9. AVSampleBufferDisplayLayer----转

    http://blog.csdn.net/fernandowei/article/details/52179631 目前大多数iOS端的视频渲染都使用OpenGLES,但如果仅仅为了渲染而不做其他的例 ...

  10. 误删除libc.so.6 恢复

    一.我是怎样一步一步毁掉系统的 最近在centos 7上进行开发.由于需要使用高版本linux内核的特性,需要将linux内核升级.按照教程:centos 7升级内核 进行升级的时候发现在安装elre ...