首页 > 网站 > WEB开发 > 正文

两列等高,左定宽,右自适应

2024-04-27 14:29:18
字体:
来源:转载
供稿:网友
两列等高,左定宽,右自适应

这个面试题的具体要求吧:

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

解决方法:

HTML Markup

<div id="container">                         <div id="content">Main Content</div><div id="sidebar">Left Sidebar</div></div>

CSS Code

*{margin: 0;padding: 0;}#container{ background-color:#0ff; overflow:hidden; padding-left:220px; /* 宽度大小等与边栏宽度大小*/}* html #container{ height:1%; /* So IE plays nice */}#content{ width:100%; border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/ margin-left:-220px;/* 宽度大小等与边栏宽度大小*/ float:right;}#sidebar{ background-color:#f00; width:220px; float:right; margin-left:-220px;/* 宽度大小等与边栏宽度大小*/}#content,#sidebar { min-height: 200px; height: auto !important; height: 200px;}

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表