CSS中的布局-优快云博客

布局那些事

两栏布局
很多情况下，要用到诸如左边固定，右边自适应这种情况，此时可以利用浮动来解决这个问题。

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

.wrapper{
  border:1px solid blue;
  height:300px;
}
.left{
  background-color:#ddd;
  width:100px;
  height:100%;
  float:left;
}
.right{
  background-color:red;
  height:100%;
  margin-left:100px;
}

通过给左边块级元素设置向左浮动，使其脱离标准文档流，从而右边的块级元素能够从第二行“跑到“第一行，这里要注意的是，左边元素其实是覆盖在右边元素上的，所以这里要给右边元素设置坐外边距，该值的大小是左边元素的宽度。

三栏布局
这里的三栏布局实现有很多种方式。

—简单的利用浮动的方式

 <div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>

.left{
  width: 100px;height: 300px; background: yellow; float: left;    
}
.right{
  width: 100px; height: 300px; background: green; float: right;
}
.middle{
  height: 300px; background: red; margin:0 100px;
}

这里要注意的是html的结构，可以看到中间拦是在最后面的，在某些极端优化场景下，要求中间内容要首先被解析出来，这样子可能会有问题，后续再说。

–利用定位的方式

<div class="left">左栏</div>
  <div class="middle">中间栏</div>
<div class="right">右栏</div>

html,body{
  margin:0;
}
.left{
  width: 200px;height: 300px; background: yellow;
  position:absolute;   
  top:0;
  left:0;
}
.right{
  width: 200px; height: 300px; background: green;
 position:absolute; 
  top:0;
  right:0;
}
.middle{
  height: 300px; background: red;
  margin:0px 200px;
}

这样子的html结构是比较正常的，但是如果他们的父元素有内外边距，那么中间的部分可能不会和两端平齐，所以我给根元素设置了外边距为0。

—设置负值的margin
在上述第一个方法中提到，有时候我会希望中间主体内容先渲染出来，所以要把中间栏的dom放在最前面，那这时候要怎么去布局呢，可以这样来：

 <div class='main'>
  <div class='middle'>
    <div class="content">
          中间栏
    </div>
  </div>
  <div class="left">左栏</div>
  <div class="right">右栏</div>
 </div>


.main{
  overflow:hidden;

}
.content{
     border:1px solid #555;
     margin:0 200px;
}

.left{
  width: 200px;height: 300px; background: yellow;
  float:left;
  margin-left:-100%;
  word-break:break-all;

}
.right{
  width: 200px; height: 300px; background: green;
  float:left;
  margin-left:-200px;
}
.middle{
  height: 300px; background: red;
 float:left;
  width:100%;

}
.wrapper{
  float:left;
  width:100%;
}

其实主要是利用了负值的margin，值得注意的是，在middle下还有一个content的子元素，并且设置了水平的margin，主要是为了让内容能够在中间显示，这也是所谓的“双飞翼“布局，不过这种做法多了一些标签，乍看之下有点复杂。还有一种类似的“圣杯“布局，大致想法是一样的，只不过在解决内容不被遮盖上，是利用了padding和相对定位来实现。

—利用flex布局
弹性盒子的话实现就很简单了

  <div class='box'>
  <div class="left">左栏</div>
  <div class="middle">中间栏</div>
  <div class="right">右栏</div>
  </div>
.box{
 display:flex;
}
.left{
  width: 200px;height: 300px; background: yellow;
}
.right{
  width: 200px; height: 300px; background: green;
}
.middle{
  height: 300px;width:100%; background: red;
}