• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
子涧
博客园    首页    新随笔    联系   管理    订阅  订阅
css中左侧固定,右侧自适应

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

       当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的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:0}

       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:0; left:0; 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:0;background:red ;}

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

posted on 2015-09-28 08:48  子涧  阅读(301)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3