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

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體: 小  |  中  |  大  |  超大  

两列等高,左定宽,右自适应这个面试题的具体要求吧:

左侧固定宽,右侧自适应屏幕宽;左右两列,等高布局;左右两列要求有最小高度,例如: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;}

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航