CSS布局

2016-12-23  本文已影响0人  饥人谷_sunny

现有样式不能满足人们的需求

Paste_Image.png

如何实现:

定宽: width: 1000px; 或max-width: 1000px;
水平居中:margin-left: auto; margin-right: auto;
Paste_Image.png

如何实现:
浮动元素+普通元素

Paste_Image.png

两侧两列固定宽度,中间列自适应宽度

三栏式布局
   #content:after{
      content: '';
      display: block;
      clear: both;
    }
    .menu{
      width: 100px;
      height: 500px;
      background: pink;
      float: left;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;
    }
    .main{
      margin-left: 110px;
      margin-right: 210px;
      height: 400px;
      background: red;
    }
  <div id="content">
    <div class="menu">aside</div>
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>

效果:

效果
  1. 是三列布局,两边固定宽度,中间自适应
  2. 中间内容元素在 dom 元素次序中优先位置
 <style>
    #content:after{
      content: '';        /*8*/
      display: block;     /*8*/
      clear: both;        /*8*/
    }
    #content{
      padding-left: 100px;  /*5*/
      padding-right: 150px; /*5*/
    }
    .aside, .main, .extra{
      float: left;         /*2*/
    }
    
    .aside{
      width: 100px;        /*1*/
      height: 300px;       /*1*/
      background: red;     /*1*/
      
      margin-left: -100%;  /*4*/
      position: relative;  /*6*/
      left: -100px;        /*6*/
    }
    .extra{
      width: 150px;        /*1*/
      height: 300px;       /*1*/
      background: yellow;  /*1*/
      
      margin-left: -150px; /*5*/
      position: relative;  /*7*/
      left: 150px;         /*7*/
      
    }
    .main{
      height: 350px;       /*1*/
      background: blue;    /*1*/
      
      width: 100%;         /*3*/
    }
  
  </style>

  <div id="content">
    <div class="main">main</div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>

效果:


效果

缺点:.mian的最小宽度不能小于.aside的宽度。(把整个页面的宽度收缩后,会出现布局错乱的效果,因为当页面收缩时,main因为是其父容器content的100%的宽度,所以main也会跟着收缩,当main收缩到比aside宽度还要小,这时候父容器ct的100%宽度<aside的宽度,就不能容纳aside,所以将其挤到了下一行。)
解决:可以给父容器ct加上一个min-width样式,min-width的值不能小于aside和extra两者间的宽度最大值,这样做可以使中间的main的宽度始终比extra和aside大,就不会导致布局错乱了。

双飞翼布局解决了什么问题呢?
双飞翼布局不仅能满足main处于优先加载的地位,而且更好的解决了圣杯布局的错乱问题,且css代码更简单,缺点是增加了一个标签。

<style>
    
    #content:after{
      content: '';        /*8*/
      display: block;     /*8*/
      clear: both;        /*8*/
    }
    #content{
  
    }
    .aside, .main, .extra{
      float: left;         /*2*/
    }
    
    .aside{
      width: 100px;        /*1*/
      height: 300px;       /*1*/
      background: red;     /*1*/
      
      margin-left: -100%;  /*4*/

    }
    .extra{
      width: 150px;        /*1*/
      height: 300px;       /*1*/
      background: yellow;  /*1*/
      
      margin-left: -150px; /*5*/

      
    }
    .main{
      /* background: blue;  */   /*第1步添加,第7步注释掉*/
      /* height: 350px;  */      /*第1步添加,第7步注释掉*/
      
      width: 100%;         /*3*/
    }
    
    .wrap{
      margin-left: 100px;  /*6*/
      margin-right: 150px; /*6*/
      background: blue;    /*7*/
      height: 350px;       /*7*/
 
    }
  
  </style>
  
  <div id="content">
    <div class="main">
      <div class="wrap">main</div>
    </div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>

效果:


效果

文章著作权归饥人谷_sunny和饥人谷所有,转载须说明来源

上一篇 下一篇

猜你喜欢

热点阅读