• CSS布局篇——固宽、变宽、固宽+变宽


    学了前端挺久了。近期写一个项目測试系统,布局时发现自己对变宽+固宽的布局还没有全然掌握,所以在这里总结一下,以后须要的时候回头看看。

    1.最简单的当然是一列或多列固宽

    比如两列固宽:

    <1>.设置一个外围div——container。是两列显示的总大小,能够是固定800px等值。

    <2>.container内分别设置两个div——sidecontent

    依据须要设置像素,比方一个是300px,还有一个是500px

    分别设置float:left;

    2.两列变宽,同1,仅仅只是将像素改为百分比,比如是一个30%,还有一个70%

    3.重点来啦,两列或多列中有固宽,有变宽——典型的是一列左固宽,一列右变宽

    <1>.设置一个外围div——container。是两列显示的总大小,能够是固定800px等值。

    <2>.container内分别设置两个div——sidewrap_content

    依据须要设置宽度,比方一个是300px还有一个是 100%;

    margin-right: -300px;

    <3>.分别设置float: left;

    <4>.wrap_content内再设置一个divcontentmargin-right: 300px;

    相同,假设是左固宽,右变宽也是一个道理。


    另外有道友回复中提到第二种方式:

    就是<1>前两步和我的同样<2>side设置float: left,而wrap_content仅仅设置margin-left: 300px <3>content设置为100%


    飞试測试过,是可行的。感谢这位朋友宅回复~~~也相同欢迎亲们回复很多其它布局方法,大家互相学习互相进步哦。

  • 相关阅读:
    变量按数据类型分类
    构造方法重载 及注意事项
    构造方法-带参
    构造方法-无参
    对对象中的属性赋值(两种方法)
    局部变量的值赋给成员变量 案例(红色字体)
    成员变量与局部变量区别
    创建对象综合案例
    20151015css3 部分css2的内容
    20151012jq4
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6961416.html
Copyright © 2020-2023  润新知