二列布局、三列布局总结

时间：2018-09-11 21:24:47 阅读：182 评论：0 收藏：0 [点我收藏+]

标签：col back 适应 font splay add oat mono space

    1，二列布局总结
    <div class="content">
        <div class="left">
            <p>Hello</p>
            <p>I‘am left</p>
        </div>
        <div class="right">
            <p>Hi</p>
            <p>I‘am right</p>
        </div>
    </div>
    1,.left{
        width:200px;
        float:left;
    }
    .right{
        margin-left:200px;
    }
    2,
        .content {
        position: relative;
    }

    .left {
        position: absolute;
        background: #fcc;
        width: 200px;
    }

    .right {
        background: #f66;
        margin-left: 210px;
    }
    3,    
    .content {
        display: flex;
    }

    .left {
        /* position: absolute; */
        background: #fcc;
        width: 200px;
    }

    .right {
        background: #f66;
        flex: 1;
    }
    4,
    .content {
        width: 100%;
    }

    .left {
        background: #fcc;
        width: 200px;
        float: left
    }

    .right {
        background: #f66;
        overflow: hidden;
    }
   1,三列布局 的样式
     圣杯布局
     <div class="content">
        <div class="main">
            中间自适应区域
        </div>
        <div class="left">
            <p>I‘am left</p>
        </div>
        <div class="right">
            <p>I‘am right</p>
        </div>
    </div>
     .content {
        padding: 0 200px;
        box-sizing: border-box;
    }

    .main {
        background: #f66;
        width: 100%;
        height: 100px;
        float: left;
    }

    .left {
        background: #fcc;
        width: 200px;
        height: 100px;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -200px;

    }

    .right {
        background: #fcc;
        width: 200px;
        height: 100px;
        float: left;
        margin-left: -200px;
        position: relative;
        right: -200px;
    }
    双飞翼布局
    <div class="content">
        <div class="main">
            <div class="main_content">
                中间自适应区域
            </div>
        </div>
        <div class="left">
            <p>I‘am left</p>
        </div>
        <div class="right">
            <p>I‘am right</p>
        </div>
    </div>
    css的布局
    .content{
        width:100%;
        box-sizing:border-box;
    } 
    .main{
        width:100%;
        float:left;
    }
    .main_content{
        margin:0 200px;
    }
    .left{
        width:200px;
        float:left;
        margin-left:-100%;
    }
    .right{
        width:200px;
        float:left;
        margin-left:-200px;
    }
    3,flex
    父级元素设置：display:flex,
    设计宽段设置宽度
    自使用的使用：flex:1
    4,postion:
    5,使用float
    页面上：
    <div class="content">
        <div class="left">
            <p>I‘am left</p>
        </div>

        <div class="right">
            <p>I‘am right</p>
        </div>
        <div class="main">
            中间自适应区域
        </div>
    </div>

    css的样式
      .left{
        float:left;
         width:200px;
      }  
      .right{
        float:right;
        width:200px;
      }
      .main{
          margin:0 200px;

      }
    6 BFC
    固定的宽度设置float:left;
    自适应的设置：overflow:hidden;

二列布局、三列布局总结

标签：col back 适应 font splay add oat mono space

原文地址：https://www.cnblogs.com/yayaxuping/p/9629768.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行