zoukankan      html  css  js  c++  java
  • 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%


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

  • 相关阅读:
    汉诺塔
    给出一个字符串,要求插入最少的字符,使得原字符串为一个回文串
    最长回文子串
    回文数 第N个回文数
    屋子里有1到100号100盏关闭的灯
    无头结点的单链表删除一个中间结点
    单链表逆转
    编程之美2.21 加法
    在一个数组中找 差值最大的两个数 差值最小的两个数 推广到 点对
    斐波那契
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6961416.html
Copyright © 2011-2022 走看看