<strong id="jzqzp"><pre id="jzqzp"><xmp id="jzqzp"></xmp></pre></strong>
<tt id="jzqzp"><span id="jzqzp"><blockquote id="jzqzp"></blockquote></span></tt>

          兩欄布局

          2019-11-29    seo達人

          兩列布局的幾種方法

          html結構

           <div class="content">

                <div class="content-left">

                  左側固定200px

                </div>

                <div class="content-right">

                  右側自適應

                </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;

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

                  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()函數

           / 清除瀏覽器默認邊距 /

                {

                  margin: 0;

                  padding: 0;

                }



                .content {

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

                  不過設置后里面文字不顯示了可以給里面塊設置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()函數,左右兩塊都要浮動

           /
          清除瀏覽器默認邊距 /

               
          {

                  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布局也有列等高的默認效果。需要設置: align-items: start;。 /

                  align-items: start;

                }

                .content-left {

                  height: 200px;

                  background: red;

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

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

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

                  box-sizing: border-box;

                  grid-column: 1;

                }

                .content-right {

                  background: blue;

                  height: 200px;

                  box-sizing: border-box;

                  grid-column: 2;

                }



          分享本文至:

          日歷

          鏈接

          blogger

          藍藍 http://www.bjlmtradeweb.com

          存檔

          一本到在线视频免费不卡观看_久久人人超碰97精品_一级做a爱过程免费_猫咪最新永久在线网站