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


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

    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{
                            100%;
                            border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/
                            margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
                            float:right;
    }
    #sidebar{
                            background-color:#f00;
                            220px;
                            float:right;
                            margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
    }
    #content,#sidebar {
                            min-height: 200px;
                            height: auto !important;
                            height: 200px;
    }
  • 相关阅读:
    20165334 我期待的师生关系
    20165228 我期望的师生关系
    20165232 预备作业3 Linux安装及学习
    20165232 学习基础和c语言基础调查
    20165232 我期望的师生关系
    20165320 第一周学习总结
    20165320 预备作业3 :Linux安装及命令入门
    20165320 预备作业2:技能学习心得与C语言学习
    20165320 我期望的师生关系
    20165203 学习基础和C语言基础调查
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/4252944.html
Copyright © 2020-2023  润新知