www.青春草,欧美日本AA,五月天婷婷综合久久,一级黄色录像视频,精品国产精品三级精品AV网址,国产一区导航,怡春院视频,国产熟妇疯狂性做爰XXXⅩ网站

來源 |?http://www.fly63.com/article/detial/9541

一，什么是兩列布局

兩列布局分為兩個，一種是垂直定寬，右側(cè)自適應(yīng)，另一種是兩列都自適應(yīng)（即縱向?qū)挾扔勺釉貨Q定，右側(cè)補(bǔ)齊剩余空間）。

在css面試題里面屬于常考題，也是一個前端開發(fā)工程師必須掌握的技能，下面將分別介紹實現(xiàn)方式。

二，頂端定寬，右側(cè)自適應(yīng)如何實現(xiàn)？

1、雙列直插式

原理：兩個元素都設(shè)置dislpay：inline-block，為了消除HTML空間的影響，父元素的字體大小需要設(shè)置為0，正確匹配元素的寬度使用計算函數(shù)計算。如果兩個元素的高度不一樣，可以給元素設(shè)置vertical-align：top調(diào)整。

缺點：由于父元素設(shè)置了font-size為0，子元素內(nèi)文字不會顯示。


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>       *{         padding: 0;         margin: 0;       }      .box{        height: 600px;        width: 100%;        font-size:0;      }      .left{        display: inline-block;        width: 100px;        height: 200px;        background-color: red;        vertical-align: top;
      }      .right{        display: inline-block;        width: calc(100% - 100px);        height: 400px;        background-color: blue;        vertical-align: top;      }style>  head>  <body>    <div>      <div>        <span>1234span>      div>      <div>        <span>1234span>      div>    div>  body>html>

2、雙浮動

原理：兩個元素設(shè)置浮動，右側(cè)自適應(yīng)元素寬度使用calc函數(shù)計算

缺點：父元素需要清除浮動


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      *{        padding: 0;        margin: 0;      }      .box{        height: 600px;        width: 100%;
      }      .left{        float: left;        width: 100px;        height: 200px;        background-color: red;      }      .right{        float: left;        width: calc(100% - 100px);        height: 400px;        background-color: blue;      }style>  head>  <body>    <div>      <div>        <span>          123adadadddddddddddddddddddddddddddddddddddddddd        span>      div>      <div>div>    div>  body>html>

3、浮動+保證金

原理：預(yù)設(shè)定寬元素浮動，右側(cè)自適應(yīng)元素設(shè)置margin-left的值大于定寬元素的寬度即可

缺點：父元素需要清除浮動。


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      *{        padding: 0;        margin: 0;      }      .box{        height: 600px;        width: 100%;
      }      .left{        float: left;        width: 100px;        height: 200px;        background-color: red;      }      .right{        margin-left: 100px;        height: 400px;        background-color: blue;      }style>  head>  <body>    <div>      <div>        <p>1234p>      div>      <div>        <p>1234p>      div>    div>  body>html>

4、浮動+ BFC

原理：父元素設(shè)置溢出：隱藏，左側(cè)定寬元素浮動，右側(cè)自適應(yīng)元素設(shè)置溢出：自動創(chuàng)建BFC

缺點：前端元素的內(nèi)容如果超過設(shè)定寬度會重疊到右側(cè)元素上。


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      *{        padding: 0;        margin: 0;      }      .box{        height: 600px;        width: 100%;        overflow: hidden;      }      .left{        float: left;        width: 100px;        height: 200px;        background-color: red;      }      .right{        overflow: auto;        height: 400px;        background-color: blue;      }style>  head>  <body>    <div>      <div>111111111111111111111111div>      <div>111111111111111111111111111111111111111111111div>    div>    <div>div>  body>html>

5、絕對+左邊距

原理：父元素相對定位，垂直元素絕對定位，右側(cè)自適應(yīng)元素設(shè)置margin-left的值大于定寬元素的寬度

缺點：父元素設(shè)置了相對定位


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      *{        padding: 0;        margin: 0;      }      .box{        height: 600px;        width: 100%;        position: relative;      }      .left{        position: absolute;        width: 100px;        height: 200px;        background-color: red;      }      .right{        margin-left: 100px;        height: 400px;        background-color: blue;      }style>  head>  <body>    <div>      <div>div>      <div>div>    div>  body>html>

6、flex布局

原理：父元素設(shè)置display：flex，自適應(yīng)元素設(shè)置flex：1

缺點：存在兼容性問題，IE10以下不支持


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      *{        padding: 0;        margin: 0;      }      .box{        height: 600px;        width: 100%;        display: flex;      }      .left{        width: 100px;        height: 200px;        background-color: red;      }      .right{        flex: 1;        height: 400px;        background-color: blue;      }style>  head>  <body>    <div>      <div>div>      <div>div>    div>  body>html>

三，左右兩端元素都自適應(yīng)

嚴(yán)格來說，并不算兩個元素都是適應(yīng)，只是將上面的定寬替換由子元素?fù)伍_而已

1、浮動+ BFC

原理和上面一樣，只是稍微元素的寬度沒有設(shè)置，由子元素?fù)伍_

2、table布局

原理：父元素顯示：表格，垂直元素外圍用一個div包裝，該div設(shè)置顯示：表格單元格，寬度：0.1％（保證最小寬度），右側(cè)元素內(nèi)部設(shè)置margin-right，右側(cè)元素設(shè)置顯示：table-cell。

缺點：IE7及以下不支持，當(dāng)display：tabletime，padding失效，父元素的line-height屬性失效，當(dāng)display：table-cell時，margin無效。


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      .parent{        display: table;        width: 100%;
      }      .box{        display: table-cell;        width: 0.1%;      }      .left{        margin-right: 20px;        background-color: red;        height: 200px;      }          .right{        display: table-cell;        background-color: blue;        height: 300px;      }style>  head>  <body>    <div>      <div>        <div>126545453dddddddd453453453div>      div>      <div>12121div>    div>  body>html>

3、flex布局

原理，缺點同上面的flex布局

4、網(wǎng)格布局

原理：父元素設(shè)置顯示：grid，grid-template-columns：auto 1fr;（這個屬性定義列寬，auto關(guān)鍵字表示由瀏覽器自己決定長度。fr是一個相對尺寸單位，表示剩余空間做等分） grid-gap：20px（行間距）

缺點：兼容性太差，IE11都不支持，谷歌57以上才可以。


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      .parent{        display:grid;        grid-template-columns:auto 1fr;        grid-gap:20px      }        .left{        background-color: red;        height: 200px;      }      .right{        height:300px;        background-color: blue;      }style>  head>  <body>    <div>      <div>1111111111111111111111111div>      <div>div>    div>  body>html>

本文完~

最后

歡迎加我微信(winty230)，拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個專業(yè)的技術(shù)人...

點個在看支持我吧

CSS兩列布局的N種實現(xiàn)