兩列布局的幾種方法

html結(jié)構(gòu)

 <div class="content">

      <div class="content-left">

        左側(cè)固定200px

      </div>

      <div class="content-right">

        右側(cè)自適應

      </div>

 </div>



1.通過float和margin-left

 / 清除瀏覽器默認邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content{

        overflow: hidden;

      }

      / 脫離文檔流 /

      .content-left {

        float: left;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        / 通過margin-left將左邊位置空出 /

        margin-left: 200px;

        background: blue;

        height: 200px;

      }



2.通過 position: absolute;絕對定位

 / 清除瀏覽器默認邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        position: relative;

      }

      / 脫離文檔流 /

      .content-left {

        position: absolute;

        top: 0;

        left: 0;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        / 通過margin-left將左邊位置空出 /

        margin-left: 200px;

        background: blue;

        height: 200px;

      }



3.通過flex彈性布局

/ 清除瀏覽器默認邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        display: flex;

      }

      .content-left {

          / 除了width: 200px;還可以flex-basis: 200px; /

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

          / flex:1;將剩余空間分給它 /

        flex: 1;

        background: blue;

        height: 200px;

      }



4.通過 display: table;表格布局

 / 清除瀏覽器默認邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        display: table;

        / 必須給父級定寬不然自適應盒子沒定寬只會由內(nèi)容撐開 /

        width: 100%;

      }

      .content-left {

        display: table-cell;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        display: table-cell;

        background: blue;

        height: 200px;

      }



5.通過inline-block和calc（）函數(shù)

 / 清除瀏覽器默認邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        / 必須加font-size=0;把inline-block默認間距去掉，

        不過設(shè)置后里面文字不顯示了可以給里面塊設(shè)置font-size:20px;

        或者把兩個塊之間的換行刪掉也能去掉間距/

        font-size: 0;

        overflow: hidden;

      }

      .content-left {

        font-size: 20px;

        display: inline-block;

        width: 200px;

        height: 200px;

        background: red;

      }



      .content-right {

        font-size: 20px;

        display: inline-block;

        background: blue;

        height: 200px;

        / 注意calc里的運算符兩邊要有空格 /

        width: calc(100% - 200px);

      }



6.通過float和calc()函數(shù)，左右兩塊都要浮動

 / 清除瀏覽器默認邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

      }

      .content-left {

        float: left;

        width: 200px;

        height: 200px;

        background: red;

      }

      .content-right {

        float: left;

        background: blue;

        height: 200px;

        / 注意calc里的運算符兩邊要有空格 /

        width: calc(100% - 200px);

      }



7.使用grid布局

 / 清除瀏覽器默認邊距 /

      {

        margin: 0;

        padding: 0;

      }



      .content {

        overflow: hidden;

        display: grid;

        grid-template-columns: 200px 1fr;

        / grid布局也有列等高的默認效果。需要設(shè)置: align-items: start;。 /

        align-items: start;

      }

      .content-left {

        height: 200px;

        background: red;

        / grid布局還有一個值得注意的小地方和flex不同:在使用margin-left的時候，

        grid布局默認是box-sizing設(shè)置的盒寬度之間的位置。

        而flex則是使用兩個div的border或者padding外側(cè)之間的距離。 */

        box-sizing: border-box;

        grid-column: 1;

      }

      .content-right {

        background: blue;

        height: 200px;

        box-sizing: border-box;

        grid-column: 2;

      }