首页

两栏布局

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.lanlanwork.com

存档