阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    CSS 一行两列

    二列固定宽度

    <div id="left">左列</div>
    <div id="right">右列</div>
    

    CSS:

    /*2列固定宽度*/
    #left{
            background-color: #cccccc;
            border: 2px solid #333333;
            width: 300px;
            height: 300px;
            float: left;
    }
    
    #right{
            background-color: #cccccc;
            border: 2px solid #333333;
            width: 300px;
            height: 300px;
            float: left;
    }
    

    效果图:

    二列自适应宽度

    
    <div id="left-self-adaption">左列</div>
    <div id="right-self-adaption">右列</div>
    

    CSS:

    #left-self-adaption{
            background-color: #cccccc;
            border: 2px solid #333333;
            width: 20%;
            height: 300px;
            float: left;
    }
    
    #right-self-adaption{
            background-color: #cccccc;
            border: 2px solid #333333;
            width: 70%;
            height: 300px;
            float: left;
    }
    

    左栏设置宽度为 20%,右栏设置宽度为 70%,看上去就像一个左侧为导航,右侧为内容区的常见网页布局形式。 效果图:


    第二种

    <div class="left"></div>
    <div class="right"></div>
    
    
    .left{
        width:20%;
        height: 500px;
        float: left;
        background:#333;
    }
    .right{
        width:80%;
        height:500px;
        float: left;
        background: pink
    }
    

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

    <div id="left-right-self-adaption">左列</div>
    <div id="right-right-self-adaption">右列</div></div>
    

    CSS:

    /*2列右宽度自适应*/
    #left-right-self-adaption{
            background-color: #cccccc;
            border: 2px solid #333333;
            width: 100px;
            height: 300px;
            float: left;
    }
    
    #right-right-self-adaption{
            background-color: #cccccc;
            border: 2px solid #333333;
            height: 300px;
    }
    

    效果图:

    二列固定宽度居中

    <div id="layout-new-center">
        <div id="left-center">左列</div>
        <div id="right-center">右列</div>
    </div>
    
    

    CSS:

    #layout-new-center{
            margin: 0px auto;
            width: 408px;
    }
    
    #left-center{
            background-color: #cccccc;
            border: 2px solid #333333;
            width: 200px;
            height: 300px;
            float: left;
    }
    
    #right-center{
            background-color: #cccccc;
            border: 2px solid #333333;
            width: 200px;
            height: 300px;
            float: left;
    }
    

    效果图:


    顶部定高和左侧定宽,右侧自适应

    1. 定位

    父元素相对定位,左侧 left 绝对定位确定自适应高度并左对齐。右侧 right 通过绝对定位自适应高度和宽度

    .body{
        height: 100%;
        position: relative;
        background-color: #F5F7F9;
      }
      .header{
        height: 80px;
        background-color: #515A6E;
      }
      .section{
        background-color: #F5F7F9;
        position: absolute;
        left: 0;
        top: 80px;
        bottom: 0;
        right: 0;
      }
      .left{
        background-color: #fff;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100px;
      }
      .right{
        background-color: #F5F7F9;
        position: absolute;
        top: 0;
        left: 100px;
        bottom: 0;
        right: 0;
      }
    

    2. float + margin

    左侧 left 使用浮动,浮动元素半脱离文档流,与近邻元素位置重叠但不会与邻近元素内部文档重叠

    .body{
      height: 100%;
      position: relative;
    }
    .header{
      height: 80px;
      background-color: #515A6E;
    }
    .section{
      background-color: #afc7de;
      position: absolute;
      left: 0;
      top: 80px;
      bottom: 0;
      right: 0;
    }
    .left{
      background-color: #fff;
      float: left;
      width: 100px;
      height: 100%;
    }
    .right{
      background-color: #F5F7F9;
      height: 100%;
      margin-left: 100px;
    }
    

    3. BFC 布局

    左浮动,右产生 BFC,利用 BFC 与 float 元素重叠的特征

    4. flex 布局

    flex-direction: column 布局自上而下,flex:1 让 section 布满除 header 外的所有区域。section 设置 flex,默认从左往右排列,flex:1 让 right 布满除 left 外的所有区域

    .body{
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .header{
      height: 80px;
      background-color: #515A6E;
    }
    .section{
      background-color: #afc7de;
      flex: 1;
      display: flex;
    }
    .left{
      background-color: #fff;
      width: 100px;
    }
    .right{
      flex: 1;
      background-color: #F5F7F9;
    }
    

    CSS 两列布局

    float + margin

    用 float 将边栏与主要内容拉到一行,然后设置主要内容的 margin。

    左边栏:

    <main style="background-color: red;">
      <aside style="background-color: yellow; float: left; width: 50px;">边栏</aside>
      <section style="background-color: green; margin-left: 50px;">主要内容</section>
    </main>
    

    右边栏

    <main style="background-color: red;">
    <aside style="background-color: yellow; float: right; width: 50px;">边栏</aside>
    <section style="background-color: green; margin-right: 50px;">主要内容</section>
    </main>
    

    position: absolute + margin

    左边栏:

    <main style="background-color: red; position: relative;">
      <aside style="background-color: yellow; position: absolute; left: 0; width: 50px;">边栏</aside>
      <section style="background-color: green; margin-left: 50px;">主要内容</section>
    </main>
    

    右边栏

    <main style="background-color: red; position: relative;">
    <aside style="background-color: yellow; position: absolute; right: 0; width: 50px;">边栏</aside>
    <section style="background-color: green; margin-right: 50px;">主要内容</section>
    </main>
    

    flex 布局


    1)table 布局 当年主流的布局方式,第一种是通过 table tr td 布局 示例:

    <style type="text/css">
    table{
    width: 800px;
    height: 300px;
    border-collapse: collapse;
    }
    .left{
    background-color: red;
    
    }
    .right{
    background-color: blue;
    }
    </style>
    <body>
    <table>
    <tr>
    <td class="left">左</td>
    <td class="right">右</td>
    </tr>
    </table>
    </body>
    

    页面效果: 文字自动垂直居中,很方便 同样可以设置左右的 width

    第二种是类比表格的 table class 示例:

    <style type="text/css">
    .table{
    display: table;
    width: 800px;
    height: 300px;
    /*border-collapse: collapse;*/
    
    }
    .tb_row{
    display: table-row;
    }
    
    .tb_cell{
    display: table-cell;
    vertical-align: middle;
    }
    
    
    .left{
    background-color: red;
    }
    .right{
    background-color: blue;
    }
    table
    </style>
    <body>
    <div class="table">
    <div class="tb_row">
    <div class="left tb_cell">左</div>
    <div class="right tb_cell">右</div>
    </div>
    </div>
    </body>
    

    页面效果: 跟表格布局一样

    2)flexbox 布局

    • 两列布局 关键:父级元素设置 display:flex

    示例:

    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    .parent{
    width: 800px;
    height: 300px;
    display: flex;
    }
    .left{
    width: 300px;
    height: 100%;
    background: red;
    }
    .right{
    flex: 1;
    height: 100%;
    background: blue;
    }
    
    </style>
    
    <body>
    <div class="parent">
    <div class="left">左</div>
    <div class="right">右</div>
    </div>
    </body>
    

    左右浮动方式 首先需要定义一个清除浮动的类,并把他放在父元素上 0 子元素上左边的儿子左浮动,右边的右浮动,宽度给百分比,高度的话由子元素内容撑起来

    .left {
    float:left;/* 只写关键代码,以下内容同理 */
    width:50%;
    }
    .right {
    float:right;
    width:50%;
    }
    

    flex 方式 在父元素上添加 display: flex; 2 个子元素添加 flex:1; 当然也可以给左边的指定宽度然后右边自适应。 父元素的高度等于子元素中最高的

    .wrapper {
        display: flex;
    }
    .left {
        flex:1;
        background: #999;
    }
    .context {
        flex: 1;
        height: 300px;
    }
    

    sxxxxxx

    #header{width:700px;margin-right:auto;margin-left:auto;}
    #bodycenter{width:700px;margin-right:auto;margin-left:auto;}
    #bodycenter #dv1{float:left;width:280px;}
    #bodycenter #dv2{float:right;width:410px;}
    #footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
    

    左侧固定,右侧自适应

    1)使用 float 和 margin

    <div class="box">
        <div class="left"></div>
        <div class="right-fix">
            <div class="right">Hello, world</div>
        </div>
    </div>
    

    CSS:

    .box { overflow: hidden }
    .left {
        float: left;
        width: 200px;
        height: 100px;
        margin-right: -200px;
        background: #888;
    }
    .right-fix {
        float: right;
        width: 100%;
    }
    .right {
        margin-left: 200px;
        height: 90px;
        background: #36C;
    }
    

    2)使用 display: table 实现

    <div class="box">
        <div class="left"></div>
        <div class="right">Hello, world</div>
    </div>
    

    CSS:

    .box {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
    .left {
        display: table-cell;
        width: 200px;
        height: 100px;
        background: #888;
    }
    .right {
        display: table-cell;
        height: 100px;
        background: #36C;
    }
    

    3)使用定位实现

    <div class="box">
        <div class="left"></div>
        <div class="right">Hello, world</div>
    </div>
    

    CSS:

    .box {
        position: relative;
    }
    .left {
        position: absolute; left: 0; top: 0;
        width: 200px;
        height: 100px;
        background: #888;
    }
    .right {
        height: 100px;
        margin-left: 200px;
        background: #36C;
    }
    

    4)使用 flex 布局

    <div class="box">
        <div class="left"></div>
        <div class="right">Hello, world</div>
    </div>
    

    CSS:

    .box {
        display: flex;
    }
    .left {
        flex: 0 0 200px;
        width: 200px;
        height: 100px;
        background: #888;
    }
    .right {
        flex: 1;
        height: 100px;
        background: #36C;
    }
    

    1 左侧 div 设置 float 属性为 left,右侧 div 设置 margin-left 属性等于或大于左侧 div 宽度

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>左右布局</title>
      <style>
        html, body {
          margin: 0;
          padding: 0;
        }
    
        .left {
          float: left;
          width: 300px;
          height: 300px;
          background: #bfbfbf;
        }
    
        .right {
          margin-left: 310px;
          height: 300px;
          background: #efefef;
        }
      </style>
    </head>
    <body>
    <p>1 左侧 DIV 设置 float 属性为 left,右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度</p>
    <div class="left">left</div>
    <div class="right">right</div>
    
    </body>
    </html>
    

    实际效果:

    2 左侧 div 设置 float 属性为 left,负边距 100%,右侧 div 中嵌套一个 div,页面内容放入嵌套的 div 中,右侧内嵌 div 设置 margin-left 属性等于或大于左侧 div 宽度

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>左右布局</title>
      <style>
        html, body {
          margin: 0;
          padding: 0;
        }
    
        .left {
          float: left;
          width: 300px;
          height: 300px;
          background: #bfbfbf;
          margin-right: -100%;
        }
    
        .right {
          float: left;
          width: 100%;
        }
    
        .right-content {
          height: 300px;
          margin-left: 310px;
          background: #efefef;
        }
    
      </style>
    </head>
    <body>
    <p>2左侧 DIV 设置 float 属性为 left,负边距 100%,右侧 DIV 中嵌套一个 DIV,页面内容放入嵌套的 DIV 中,右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度</p>
    
    <div class="left">left</div>
    <div class="right">
      <div class="right-content">right</div>
    </div>
    
    </body>
    </html>
    

    实际效果:

    3 如果将需求修改为右侧固定宽度而左侧自适应宽度

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>左右布局</title>
      <style>
        html, body {
          margin: 0;
          padding: 0;
        }
    
        .left {
          float: left;
          width: 100%;
          height: 300px;
          background: #bfbfbf;
          margin-right: -300px;
        }
        .right {
          float: right;
          width: 300px;
          height: 300px;
          background: #efefef;
        }
    
      </style>
    </head>
    <body>
    <p>3 如果将需求修改为右侧固定宽度而左侧自适应宽度</p>
    
    <div class="left">left</div>
    <div class="right">right</div>
    
    </body>
    
    实际效果:

    4 左边左浮动,右边 overflow:hidden 不过这种方法 IE6 下不兼容

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>左边左浮动,右边overflow:hidden 不过这种方法IE6下不兼容</title>
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
        p{
          margin: 20px 0;
          text-align: center;
        }
    
        .left {
          float: left;
          width: 200px;
          height: 200px;
          background: #bfbfbf;
        }
    
        .right {
          overflow: hidden;
          height: 200px;
          background: #efefef;
        }
      </style>
    
    </head>
    <body>
    
    <p>左边左浮动,右边overflow:hidden 不过这种方法IE6下不兼容</p>
    
    <div class="left">
      <h4>left</h4>
    </div>
    <div class="right">
      <h4>right</h4>
    </div>
    </body>
    </html>
    

    实际效果:

    5 左边使用绝对定位,右边使用 margin-left

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>左边使用绝对定位,右边使用margin-left</title>
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
        p{
          margin: 20px 0;
          text-align: center;
        }
        .content{
          position: relative;
        }
    
        .left {
          position: absolute;
          top: 0;
          left: 0;
          width: 200px;
          height: 200px;
          background: #bfbfbf;
        }
    
        .right {
          margin-left: 200px;
          height: 200px;
          background: #efefef;
        }
      </style>
    </head>
    <body>
    
    <p>左边使用绝对定位,右边使用margin-left-最外层需要设置相对定位</p>
    
    <div class="content">
      <div class="left">
        <h4>left</h4>
      </div>
      <div class="right">
        <h4>right</h4>
      </div>
    </div>
    
    </body>
    </html>
    

    实际效果:

    6 左边绝对定位,右边也绝对定位

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>左边绝对定位,右边也绝对定位</title>
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
    
        p {
          margin: 20px 0;
          text-align: center;
        }
    
        .content {
          position: relative;
        }
    
        .left {
          position: absolute;
          top: 0;
          left: 0;
          width: 200px;
          height: 200px;
          background: #bfbfbf;
        }
    
        .right {
          position: absolute;
          left: 200px;
          top: 0;
          right: 0;
          height: 200px;
          background: #efefef;
        }
      </style>
    </head>
    <body>
    
    <p>左边绝对定位,右边也绝对定位</p>
    
    <div class="content">
      <div class="left">
        <h4>left</h4>
      </div>
      <div class="right">
        <h4>right</h4>
      </div>
    </div>
    
    </body>
    </html>
    

    实际效果:

    000000

    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
    

    左边定宽,右边自适应 float + margin

    .left{
        width: 100px;
        float: left;
    }
    .right{
        margin-left: 120px;
    }
    float + overflow
    
    /*和 1 方法表现的效果一样*/
    .left{
        width: 100px;
        float: left;
    }
    .right{
        margin-left: 20px;
        overflow: hidden;
    }
    table
    
    .parent{
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    .left,.right{
        display: table-cell;
    }
    .left{
        width: 100px;
        padding-right: 20px;
    }
    flex
    
    .parent{
        display: flex;
    }
    .right{
        flex: 1;
    }
    .left{
        width: 100px;
    }
    absolute
    
    .parent{
        position: relative;
    }
    .right{
        position: absolute;
        left: 100px;
        right: 0;
    }
    .left{
        width: 100px;
    }
    

    左边不定宽,右边自适应

    float + overflow

    
    .left{
        float: left;
    }
    .right{
        margin-left: 20px;
        overflow: hidden;
    }
    table
    
    .parent{
        display: table;
        width: 100%;
    }
    .left,.right{
        display: table-cell;
    }
    .left{
        width: 0.1%;
    }
    .left{
        padding-left: 10px;
    }
    flex
    
    .parent{
        display: flex;
    }
    .right{
        flex: 1;
    }
    .left{
        margin-right: 20px;
    }
    

        <div class="ec-contain-flex">
          <div class="ec-contain-img"></div>
          <div class="ec-contain-text"><p>this is text</p></div>
        </div>
        <div class="ec-contain-flex">
          <div class="ec-contain-text"><p>右侧布局</p></div>
          <div class="ec-contain-img"></div>
        </div>
    
    * {
        padding: 0;
        margin: 0;
        -webkit-font-smoothing: antialiased;
        /* font-family: "Microsoft YaHei"; */
    }
    .ec-contain-flex {
        width: 100%;
        min-height: 100px;
        height: auto;
        background: #eee;
        display: flex;
    }
    .ec-contain-flex .ec-contain-img {
        width: 83px;
        height: 83px;
        background: red;
        flex-grow: 0;
    }
    .ec-contain-flex .ec-contain-img img {
        width: 83px;
        height: 83px;
    }
    .ec-contain-flex .ec-contain-text {
        margin-left: 13px;
        width: auto;
        height: auto;
        flex-grow: 1;
    }
    
    

    ················

    1,一列定宽,一列自适应

    float + margin

    .left {
        float: left;
        width: 100px;
    }
    .right {
        margin-left: 120px;
    }
    

    table

    .parent {
        width: 100%;
        display: table;
        table-layout: fixed;
    }
    .left, .right {
        display: table-cell;
    }
    .left {
        width: 100px;
        padding-right: 20px;
    }
    

    flex

    .parent {
        display: flex;
    }
    .left {
        width: 100px;
        padding-right: 20px;
    }
    .right {
        flex: 1;
    }
    

    =================

    3,一列不定宽,一列自适应

    float + overflow

    .left {
        float: left;
        margin-right: 20px;
    }
    .right {
        overflow: hidden;
    }
    

    table

    .parent {
        display: table;
        width: 100%;
    }
    .left, .right {
        display: table-cell;
    }
    

    flex

    .parent {
        display: flex;
    }
    .left {
        margin-right: 20px;
    }
    .right {
        flex: 1;
    }
    

    多列不定宽,一列自适应

    float + overflow

    .left, .center {
        float: left;
        margin-right: 20px;
    }
    .right {
        overflow: hidden;
    }
    

    ;;;;;;;;;;;;;;;;;;;;;;

    <!doctype html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>左栏固定宽度,右栏自适应之绝对定位法</title>
    	<style type="text/css">
    	body{
    		margin: 0;
    	}
    	#nav{
    		top: 0;
    		left: 0;
    		width: 230px;
    		height: 600px;
    		background: #ccc;
    		position: absolute;
    	}
    	#main{
    		height: 600px;
    		margin-left: 230px;
    		background: #0099ff;
    	}
    	</style>
    </head>
    <body>
    	<div id="container">
    		<div id="nav">
    			左栏
    		</div>
    		<div id="main">
    			右栏
    		</div>
    	</div>
    </body>
    </html>
    看起来很美好,但是。。
    
    由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将container撑开,这个缺陷单单只看两栏布局并没有太大影响,但如果两栏布局下面有一个底栏,就会出现底栏与左栏重叠的情况:
    
    <!doctype html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>左栏固定宽度,右栏自适应之绝对定位法</title>
    	<style type="text/css">
    	body{
    		margin: 0;
    	}
    	#nav{
    		top: 0;
    		left: 0;
    		width: 230px;
    		height: 600px;
    		background: #ccc;
    		position: absolute;
    	}
    	#main{
    		height: 400px;
    		margin-left: 230px;
    		background: #0099ff;
    	}
    	#footer{
    		text-align: center;
    		background: #009000;
    	}
    	</style>
    </head>
    <body>
    	<div id="container">
    		<div id="nav">
    			左栏
    		</div>
    		<div id="main">
    			右栏
    		</div>
    	</div>
    	<div id="footer">
    		底栏
    	</div>
    </body>
    </html>
    我们再来看看第二种方法,左栏固定宽度,右栏自适应之负margin法:
    
    <!doctype html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>左栏固定宽度,右栏自适应之负margin法</title>
    	<style type="text/css">
    	body{
    		margin: 0;
    	}
    	#container{
    		margin-left: 230px;
    		_zoom: 1;
    		/*兼容IE6下左栏消失问题*/
    	}
    	#nav{
    		float: left;
    		width: 230px;
    		height: 600px;
    		background: #ccc;
    		margin-left: -230px;
    		position: relative;
    		/*兼容IE6下左栏消失问题,IE6真不让人省心啊>_<*/
    	}
    	#main{
    		height: 600px;
    		background: #0099ff;
    	}
    	</style>
    </head>
    <body>
    	<div id="container">
    		<div id="nav">
    			左栏
    		</div>
    		<div id="main">
    			右栏
    		</div>
    	</div>
    </body>
    </html>
    这样无论两栏的高度如何变化都不会有问题了:
    
    <!doctype html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>左栏固定宽度,右栏自适应之负margin法</title>
    	<style type="text/css">
    	body{
    		margin: 0;
    	}
    	#container{
    		margin-left: 230px;
    		_zoom: 1;
    		/*兼容IE6下左栏消失问题*/
    	}
    	#nav{
    		float: left;
    		width: 230px;
    		height: 600px;
    		background: #ccc;
    		margin-left: -230px;
    		position: relative;
    		/*兼容IE6下左栏消失问题,IE6真不让人省心啊>_<*/
    	}
    	#main{
    		height: 400px;
    		background: #0099ff;
    	}
    	#footer{
    		clear: both;
    		text-align: center;
    		background: #009000;
    	}
    	</style>
    </head>
    <body>
    	<div id="container">
    		<div id="nav">
    			左栏
    		</div>
    		<div id="main">
    			右栏
    		</div>
    	</div>
    	<div id="footer">
    		底栏
    	</div>
    </body>
    </html>
    

    右侧固定,左侧自适应

    <div class="box">
        <div class="left-fix">
            <div class="left">Hello, world</div>
        </div>
        <div class="right"></div>
    </div>
    

    CSS:

    .box { overflow: hidden; }
    .left-fix {
        float: left;
        width: 100%;
        height: 100px;
        background: #777;
    }
    .left {
        margin-right: 200px;
    }
    .right {
        float: right;
        width: 200px;
        height: 100px;
        margin-left: -200px;
        background: #36C;
    }
    

    其他实现方式有 display: table、定位以及 flex,原理和左侧固定右侧自适应一致。

    左右布局

    1.1. 用 ‘float’ 实现左右布局

    只要设定两个布局块的宽度总和为 ‘container’(容器) 的宽,那么俩个 class 的 float 属性可均为 ‘float:left;’

    也可以用以下方法让右边块级元素自适应左边达到左右布局

    即给 ‘right’ 的宽度加上 ‘margin-left’

    1.2. 用 ‘position’ 实现左右布局

    父元素设置为 position:relative;

    left 设置固定宽度,设定为绝对定位’position:absolute'。

    right 设置为相对定位’position:relative'。

    right 设置左边距,‘margin-left’ 为左侧栏的宽度。

    https://zhuanlan.zhihu.com/p/38206945


    左列定宽,右列自适应

    (1) 利用 float+margin▲

    html 代码:

    <body>
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
    </body>
    

    css 代码:

    #left {
        background-color: #f00;
        float: left;
        width: 100px;
        height: 500px;
    }
    #right {
        background-color: #0f0;
        height: 500px;
        margin-left: 100px; /*设置间隔,大于等于#left的宽度*/
    }
    

    原理:#left 左浮动,脱离文档流,#right 为了不被#left 挡住,设置 margin-left 大于等于#left 的宽度达到视觉上的两栏布局

    优缺点

    优点:代码简单;容易理解;兼容性好 缺点:#left 的宽度和#right 的 margin-left 需要对应且固定

    (2) 利用 float+margin(fix)

    html 代码:

    <body>
    <div id="left">左列定宽</div>
    <div id="right-fix">
        <div id="right">右列自适应</div>
    </div>
    </body>
    

    css 代码:

    #left {
        background-color: #f00;
        float: left;
        width: 100px;
        height: 500px;
    }
    #right-fix {
        float: right;
        width: 100%;
        margin-left: -100px; /*正值大于或等于#left的宽度,才能上移一行*/
    }
    #right{
        margin-left: 100px; /*大于或等于#left的宽度,才不会遮挡#left*/
        background-color: #0f0;
        height: 500px;
    }
    

    优缺点

    优点:代码较简单;兼容性好 缺点:相比(1)的方法,多了一个 div,多写了一些代码;不容易理解;margin 需要对应好

    (3) 使用 float+overflow▲

    html 代码:

    <body>
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
    </body>
    

    css 代码:

    #left {
        background-color: #f00;
        float: left;
        width: 100px;
        height: 500px;
    }
    #right {
        background-color: #0f0;
        height: 500px;
        overflow: hidden; /*触发bfc达到自适应*/
    }
    

    原理:#left 左浮动,#right 触发 bfc 达到自适应

    优缺点:

    优点:代码简单;容易理解;无需关注定宽的宽度,利用 bfc 达到自适应效果 缺点:#right 设置 margin-left 需要大于#left 的宽度才有效,或者直接给#left 设置 margin-right

    (4) 使用 table 实现

    html 代码:

    <div id="parent">
        <div id="left">左列定宽</div>
        <div id="right">右列自适应</div>
    </div>
    

    css 代码:

    #parent{
        width: 100%;
        display: table;
        height: 500px;
    }
    #left {
        width: 100px;
        background-color: #f00;
    }
    #right {background-color: #0f0;}
    /*利用单元格自动分配宽度*/
    #left,#right{display: table-cell;}
    

    原理:CSS Table 以表格的形式显示

    优缺点:

    优点:代码简单;容易理解;适用于宽度高度未知情况;兼容性好(ie8+) 缺点:margin 失效;设置间隔比较麻烦;设置 tabl-cell 的元素,宽度和高度的值设置百分比无效,需要给它的父元素设置 display: table; 才生效;table-cell 不感知 margin,在父元素上设置 table-row 等属性,也会使其不感知 height;设置 float 或 position 会对默认布局造成破坏,可以考虑为之增加一个父 div 定义 float 等属性;内容溢出时会自动撑开父元素

    (5) 使用 position 实现

    html 代码:

    <body>
    <div id="parent">
        <div id="left">左列定宽</div>
        <div id="right">右列自适应</div>
    </div>
    </body>
    

    css 代码:

    #parent{position: relative;}  /*父相*/
    #left {
        position: absolute;  /*子绝*/
        top: 0;
        left: 0;
        background-color: #f00;
        width: 100px;
        height: 500px;
    }
    #right {
        position: absolute;  /*子绝*/
        top: 0;
        left: 100px;  /*值大于等于#left的宽度*/
        right: 0;
        background-color: #0f0;
        height: 500px;
    }
    

    原理:利用绝对定位算好宽高固定好两个盒子的位置

    优缺点

    优点:容易理解;兼容性好 代码较多;脱离文档流;左边盒子的 width 需要对应右边盒子的 left 值

    (6) 使用 flex 实现

    html 代码:

    <body>
    <div id="parent">
        <div id="left">左列定宽</div>
        <div id="right">右列自适应</div>
    </div>
    </body>
    

    css 代码:

    #parent{
        width: 100%;
        height: 500px;
        display: flex;
    }
    #left {
        width: 100px;
        background-color: #f00;
    }
    #right {
        flex: 1; /*均分了父元素剩余空间*/
        background-color: #0f0;
    }
    

    原理:flex 设置排列方式、对齐方式罢了,请查阅文末 flex 阅读推荐

    优缺点

    优点:简单灵活;功能强大 缺点:PC 端兼容性不好,移动端(Android4.0+) flex 务必带上兼容,写法请参考文末阅读推荐,也可以使用 autoprefixer

    (7) 使用 Grid 实现

    html 代码:

    <body>
    <div id="parent">
        <div id="left">左列定宽</div>
        <div id="right">右列自适应</div>
    </div>
    </body>
    

    css 代码:

    #parent {
        width: 100%;
        height: 500px;
        display: grid;
        grid-template-columns: 100px auto;  /*设定2列就ok了,auto换成1fr也行*/
    }
    #left {background-color: #f00;}
    #right {background-color: #0f0;}
    

    原理:css grid 布局,请查看文末的阅读推荐

    优缺点

    优点:灵活划分网格区域;新型布局利器,适用于页面三维布局 缺点:兼容性不好,移动端(Android5.0+)

    4.2 左列自适应,右列定宽

    效果:

    image.png

    (1) 使用 float+margin▲

    html 代码:

    <body>
    <div id="parent">
        <div id="left">左列自适应</div>
        <div id="right">右列定宽</div>
    </div>
    </body>
    

    css 代码:

    #parent{
        height: 500px;
        padding-left: 100px;  /*抵消#left的margin-left以达到#parent水平居中*/
    }
    #left {
        width: 100%;
        height: 500px;
        float: left;
        margin-left: -100px; /*正值等于#right的宽度*/
        background-color: #f00;
    }
    #right {
        height: 500px;
        width: 100px;
        float: right;
        background-color: #0f0;
    }
    

    原理:一个左浮一个右浮,#left 宽度 100% 所以要设置 margin-left 负值让#right 上来一行,然后#parent 设置 padding-left 的正值抵消掉#left 的位移,此处换成 margin 也可以

    优缺点

    优点:代码简单;兼容性好; 缺点:较难理解;margin 或 padding 的值要对应好;浮动脱离文档流,需要手动清除浮动,否则会产生高度塌陷

    (2) 使用 float+overflow▲

    html 代码:

    <body>
    <div id="parent">
        <div id="right">右列定宽</div>
        <div id="left">左列自适应</div>   <!--顺序要换一下-->
    </div>
    </body>
    

    css 代码:

    #left {
        overflow: hidden;  /*触发bfc*/
        height: 500px;
        background-color: #f00;
    }
    #right {
        margin-left: 10px;  /*margin需要定义在#right中*/
        float: right;
        width: 100px;
        height: 500px;
        background-color: #0f0;
    }
    

    原理:#right 右浮动,#left 触发 bfc 达到自适应

    优缺点:

    优点:代码简单;容易理解;无需关注定宽的宽度,利用 bfc 达到自适应效果 缺点:#left 设置 margin-right 需要大于#right 的宽度才有效,或者直接给#right 设置 margin-left

    (3) 使用 table 实现

    html 代码:

    <body>
    <div id="parent">
        <div id="left">左列自适应</div>
        <div id="right">右列定宽</div>
    </div>
    </body>
    

    css 代码:

    #parent{
        width: 100%;
        height: 500px;
        display: table;
    }
    #left {
        background-color: #f00;
        display: table-cell;
    }
    #right {
        width: 100px;
        background-color: #0f0;
        display: table-cell;
    }
    

    原理:CSS Table 以表格的形式显示

    优缺点:

    优点:代码简单;容易理解;适用于宽度高度未知情况;兼容性好(ie8+) 缺点:margin 失效;设置间隔比较麻烦;设置 tabl-cell 的元素,宽度和高度的值设置百分比无效,需要给它的父元素设置 display: table; 才生效;table-cell 不感知 margin,在父元素上设置 table-row 等属性,也会使其不感知 height;设置 float 或 position 会对默认布局造成破坏,可以考虑为之增加一个父 div 定义 float 等属性;内容溢出时会自动撑开父元素

    (4) 使用 position 实现

    html 代码:

    <body>
    <div id="parent">
        <div id="left">左列自适应</div>
        <div id="right">右列定宽</div>
    </div>
    </body>
    

    css 代码:

    #parent{position: relative;}  /*父相*/
    #left {
        position: absolute;  /*子绝*/
        top: 0;
        left: 0;
        right: 100px;  /*大于等于#rigth的宽度*/
        background-color: #f00;
        height: 500px;
    }
    #right {
        position: absolute;  /*子绝*/
        top: 0;
        right: 0;
        background-color: #0f0;
        width: 100px;
        height: 500px;
    }
    

    原理:利用绝对定位算好宽高固定好两个盒子的位置

    优缺点

    优点:容易理解;兼容性好 代码较多;脱离文档流;左边盒子的 right 需要对应右边盒子的 width 值

    (5) 使用 flex 实现

    html 代码:

    <body>
    <div id="parent">
        <div id="left">左列自适应</div>
        <div id="right">右列定宽</div>
    </div>
    </body>
    

    css 代码:

    #parent{
        height: 500px;
        display: flex;
    }
    #left {
        flex: 1;
        background-color: #f00;
    }
    #right {
        width: 100px;
        background-color: #0f0;
    }
    

    原理:flex 设置排列方式、对齐方式罢了,请查阅文末 flex 阅读推荐

    优缺点

    优点:简单灵活;功能强大 缺点:PC 端兼容性不好,移动端(Android4.0+) flex 务必带上兼容,写法请参考文末阅读推荐,也可以使用 autoprefixer

    (6) 使用 Grid 实现

    html 代码:

    <body>
    <div id="parent">
        <div id="left">左列自适应</div>
        <div id="right">右列定宽</div>
    </div>
    </body>
    

    css 代码:

    #parent {
        height: 500px;
        display: grid;
        grid-template-columns: auto 100px;  /*设定2列,auto换成1fr也行*/
    }
    #left {background-color: #f00;}
    #right {background-color: #0f0;}
    

    原理:css grid 布局,请查看文末的阅读推荐

    优缺点

    优点:灵活划分网格区域;新型布局利器,适用于页面三维布局 缺点:兼容性不好,移动端(Android5.0+)

    4.3 一列不定,一列自适应

    (盒子宽度随着内容增加或减少发生变化,另一个盒子自适应)

    效果图:

    image.png

    变化后:

    image.png

    (1) 使用 float+overflow▲

    html 代码:

    <body>
    <div id="parent">
        <div id="left">左列不定宽</div>
        <div id="right">右列自适应</div>
    </div>
    </body>
    

    css 代码:

    #left {
        margin-right: 10px;
        float: left;  /*只设置浮动,不设宽度*/
        height: 500px;
        background-color: #f00;
    }
    #right {
        overflow: hidden;  /*触发bfc*/
        height: 500px;
        background-color: #0f0;
    }
    

    原理:#left 不设宽度左浮动,#right 触发 bfc 达到自适应

    优缺点:

    优点:代码简单,容易理解,无需关注宽度,利用 bfc 达到自适应效果 缺点:#right 设置 margin-left 需要大于#left 的宽度才有效,或者直接给#left 设置 margin-right

    (2) 使用 flex 实现

    html 代码:

    <body>
    <div id="parent">
        <div id="left">左列不定宽</div>
        <div id="right">右列自适应</div>
    </div>
    </body>
    

    css 代码:

    #parent{display: flex;}
    #left { /*不设宽度*/
        margin-right: 10px;
        height: 500px;
        background-color: #f00;
    }
    #right {
        height: 500px;
        background-color: #0f0;
        flex: 1;  /*均分#parent剩余的部分*/
    }
    

    原理:flex 设置排列方式、对齐方式罢了,请查阅文末 flex 阅读推荐

    优缺点

    优点:简单灵活;功能强大 缺点:PC 端兼容性不好,移动端(Android4.0+) flex 务必带上兼容,写法请参考文末阅读推荐,也可以使用 autoprefixer

    (3) 使用 Grid 实现

    html 代码:

    <body>
    <div id="parent">
        <div id="left">左列不定宽</div>
        <div id="right">右列自适应</div>
    </div>
    </body>
    

    css 代码:

    #parent{
        display: grid;
        grid-template-columns: auto 1fr;  /*auto和1fr换一下顺序就是左列自适应,右列不定宽了*/
    }
    #left {
        margin-right: 10px;
        height: 500px;
        background-color: #f00;
    }
    #right {
        height: 500px;
        background-color: #0f0;
    }
    

    原理:css grid 布局,请查看文末的阅读推荐

    优缺点

    优点:灵活划分网格区域;新型布局利器,适用于页面三维布局 缺点:兼容性不好,移动端(Android5.0+)

    ★本章小结:

    • 两列布局我们用得比较多的就是浮动,然后最简单就是把另外那个不是浮动的盒子触发 bfc 以达到自适应效果就 O 了。其次就是设置对应固宽值的的一些 margin、padding 去改变盒子的排布以达到我们的目的;
    • 除了浮动,我们还可以用绝对定位,计算好宽高、位置去设置样式,这个简单也容易理解,就是脱离文档流并且代码稍微多了一点;
    • 还有就是 css table 布局,其实这个挺强大的,也简单,兼容性不错(ie8+),但就是 table 表现的 bug 太多,不感知 margin 之类的一些属性。当然,要是需求足够,完全是可以先考虑这个的;
    • 移动端兼容性允许的情况下能用 flex 就用 flex,务必带上兼容,写法可参考文末阅读推荐,也可以使用 Autoprefixer;
    • 左列自适应,右列不定宽同理(参考 4.1 和 4.3 对应代码示例)。

    https://www.miidc.com/news/content50642.html

    从【3、一列定宽,一列自适应(其他类似的类型都可以由此衍生)】开始看

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录