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


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

    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;
    }
  • 相关阅读:
    hive sql基础了解
    创建自增字段,修改字段
    flysql 里两种传参的方式
    创建有赞商品资料
    cortable 使用方法
    学会如何使用,pycharm,和gitlanb
    进程和线程
    创建商品资料模板
    SAP 实例 5 CFW Events
    SAP 实例 4 CFW
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/4252944.html
Copyright © 2020-2023  润新知