两列等高,左定宽,右自适应这个面试题的具体要求吧:
左侧固定宽,右侧自适应屏幕宽;左右两列,等高布局;左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高)要求不用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;}