圣杯布局和双飞翼布局

2018-09-10 01:12:57来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、圣杯布局(两边固定,中间自适应)

html:

          <div class="container">

            <div class="middle">middle</div>

            <div class="left">left</div>

           <div class="right">right</div>

         </div>

css:

*{

   margin:0;

   padding:0;

}

.container{

    padding:0 100px 0 200px;

    overflow:hidden;

}

.left,.middle,.right{

   position:relative;

   float:left;

  min-height:200px;

}

.left{

  margin-left:-100%;

  left:-200px;

  width:200px;

  background:#ccc

}

.middle{

  width:100%;

  background:red;

}

.right{

  margin-left:-100px;

  right:-100px;

  width:100px;

  background:green

}

 

 

二、双飞翼布局

html

   <div class="container">

        <div class="middle">

             <div class="middleInner">middle</div>

        </div>

       <div class="left"></div> 

      <div class="right"></div>

  </div>

 

css

    *{

       margin:0;

       padding:0;

    }

    .middle,.left,.right{

       float:left;

      min-height:200px;

   }

  .left{

     width:100px;

     margin-left:-100%;

    background:red;

  }

.right{

   width:200px;

   margin-left:-200px;

  background:blue;

}

.middle{

   width:100%

}

.middleInner{

     margin:0 200px 0 100px;

     min-height:200px;

    background:green;

}

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Vue表格中,对数据进行转换、处理

下一篇:html5中如何去掉input type date默认