美文网首页
两列布局

两列布局

作者: Pretty_Boy | 来源:发表于2017-09-27 17:01 被阅读17次

    左侧固定宽度,右侧自适应。

    BFC实现
    <div class="container">
        <div class="aside">左列宽度固定</div>
        <div class="main">右列宽度自适应</div>
    <div>
    
    .container {
      /* position: relative; */
    }
    .container .aside {
      float: left;
      width: 200px;
      background: red;
      height:200px;
    }
    .container .main {
      overflow: hidden;
      background: blue;
      height:200px;
    }
    
    Table实现
    <div id="main">
        <div id="left">DIVA</div>
        <div id="right">DIVB</div>
    </div>
    <div id="bottom">DIVC</div>
    
    #left, #right{
        height: 200px;
    }
    #left {
        width:200px;
        background: red;
    }
    #right {
        background: blue;
    }
    #main { display: table; width: 100%; }
    #left,#right { display: table-cell; }
    #right { width: auto; }
    
    相对绝对定位
    <div class="container">
        <div class="aside">左列宽度固定</div>
        <div class="main">右列宽度自适应</div>
    <div>
    
    .container {
        position: relative;
    }
    .container .aside {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background: red;
    }
    .container .main {
        height: 200px; 
            margin-left: 200px;
        background: blue;
    }
    

    若要两侧都是自适应时,则使用百分比。

    相关文章

      网友评论

          本文标题:两列布局

          本文链接:https://www.haomeiwen.com/subject/xxyuextx.html