首页 > 开发 > CSS > 正文

CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)

2024-07-11 08:32:55
字体:
来源:转载
供稿:网友

左侧固定宽,右侧自适应屏幕宽;

左右两列,等高布局;

左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高)

要求不用JS或CSS行为实现;

仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事:

左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了;

左右两列等高布局,这一点相对来说要复杂一些,不过你要是了解了怎么实现等高布局,那么也是不难。我个人认为这个考题关键之处就在考这里,考你如何实现等高布局;所以这一点你需要整明白如何实现;

至于第三条要求,应该来说是很方面的,我们随处都可以看到实现最小高度的代码;

第四条这个要求我想是考官想让我们面试的人不能使用js来实现等高布局和最小高度的功能。

上面简单的分析了一下实现过程,那么最终关键之处应该是就是“让你的代码要能同时实现两点,其一就是左边固定,右边自适应的布局;其二就是实现两列等高的布局”,如果这两个功能完成,那么你也就可以交作业了。那么下面我们就先来看看这两 点是如合实现:

一、两列布局:左边固定宽度,右边自适应宽度

这样的布局,其实不是难点,我想很多同学都有实现过,那么我就在此稍微介绍两种常用的方法:

方法一:浮动布局

这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果

HTML Markup

CSS Code复制内容到剪贴板
  1. <div id="left">Left sidebar</div>    <div id="content">Main Content</div>   
  2.    CSS Code   
  3.    <style type="text/css">   
  4.    *{   
  5.    margin: 0;   
  6.    padding: 0;   
  7.    }   
  8.      #left {   
  9.    float: left;   
  10.    width: 220px;   
  11.    background-color: green;   
  12.    }   
  13.    #content {   
  14.    background-color: orange;   
  15.    margin-left: 220px;/*==等于左边栏宽度==*/  
  16.    }   
  17. </style>   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表