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%


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

  • 相关阅读:
    网站搜索功能lucene
    RabbitMQ消息队列
    zookeeper
    RPC+SOA+dubbo
    石英定时任务-quartz
    通用mapper、图片上传、nginx
    通用mapper和分类实现
    后台商品管理功能实现
    构建框架
    海量数据的并发处理
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6961416.html
Copyright © 2011-2022 走看看