• div+css两列布局与三列布局


    一、两列布局:

        1.左边定宽,右边自适应。

        方法一:采用position:absollute;并设置margin-left的值。

        例:

    #left{
        position:absolute;
        300px;
        top:0px;
        left:0px;
        background:#F00;
    }
    #right{
        background:#0FC;
        margin-left:300px;
    }
    <div id="left">左边定宽</div> <div id="right">右边自适应</div>

            方法二:采用float;并设置overflow:auto;(隐藏溢出的内容)

            例:

    #left {
        float: left;
         300px;
        background-color: blue;
    }
    #right {
        overflow: auto;
        background-color: red;
    }
    
    <div id="left">左边自适应</div>
    <div id="right">右边定宽</div>

    二、三列布局:

         方法一:与两列布局类似,左右两边设置position:absolute;和top:0;left:0;right:0;

                     中间设置margin-left和margin-right即可.

    *{
        padding:0px;
        margin:0px;
    }
    #left,#right{
        position:absolute;
         300px;
        top:0;
        background-color: #0FC;
    }
    #left{
        left:0;
    }
    #right{
        right:0;
    }
    #main{
        margin:0 300px;
        background-color:#999;
    }
    
    <div id="left">左边定宽</div>
    <div id="main">中间自适应</div>
    <div id="right">右边定宽</div>

         方法二:左右采用float,中间设置 overflow:auto;和margin:0 300px;

    *{
        padding:0px;
        margin:0px;
    }
    #left,#right{
        float:left;
         300px;
        background-color: #0FC;
    }
    #right{
        overflow:auto;
        float:right;
    }
    #main{
        margin:0 300px;
        background-color:#999;
    }
    
    <div id="left">左边定宽</div>
    <div id="right">右边定宽</div>
    <div id="main">中间自适应</div>

    ps:欢迎指正优化

    清风徐来,水波不兴
  • 相关阅读:
    Java命名规范
    用U盘安装系统2
    将Sublime Text3添加到右键菜单中
    Git版本控制使用介绍
    Sublime Text各种插件使用方法
    安装Sublime Text 3插件
    Sublime Text修改显示图标
    卸载Visual Studio Code后删除右键Open with Code…
    做最好的自己(Be Your Personal Best)
    Eclipse全屏及插件下载
  • 原文地址:https://www.cnblogs.com/it-xiaojun/p/5884697.html
Copyright © 2020-2023  润新知