zoukankan      html  css  js  c++  java
  • 左列固定,右列宽度自适应,流体框架 Fred

    在实际应用中,有时候需要左栏固定宽度,右栏根据浏览器窗口大小自动适应,在CSS中实现这样的布局方式是简单可行的,只需在设置左栏的宽度即可,如上例中左右栏都采用了百分比实现了宽度自适应,而我们只需要将左栏宽度设定为固定值,右栏不设置任何宽度值,并且右栏不浮动,代码如下:

    #left {
        background-color: #E8F5FE;
        border: 1px solid #A9C9E2;
        float: left;
        height: 300px;
         200px;
    }
    #right {
        background-color: #F2FDDB;
        border: 1px solid #A5CF3D;
        height: 300px;
    }

    这样,左栏将呈现100%的宽度,而右栏将根据浏览器窗口大小自适应。兼容IE7/FF3

     

    Code

     

    二列右列宽度自适应经常在网站在用到,不仅是右列,也可以是左列,方法是一样的,只需要改变两个div的编写即可,而这种应用在目前的许多blog都能够经常看到,如pjblog中的许多网友制作的模板就是这种布局的。
  • 相关阅读:
    Map 中的EntrySet() ,Map的遍历
    Struts2拦截器原理
    基于 <tx> 和 <aop> 命名空间的声明式事务管理
    Spring AOP Example 文件下载:
    Struts2拦截器
    好多开发文档——官网打不开的福音
    threejs样例
    bootCDN,用了都说好
    react拷贝index.html很恶心之解决办法
    网络爬虫好
  • 原文地址:https://www.cnblogs.com/Fred_Xu/p/1541515.html
Copyright © 2011-2022 走看看