阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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+)

      ★本章小结:


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

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

      卖前端学习教程

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

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

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

      推荐阅读

      前端学习和工作的分享

      目录
      本文目录
      目录