珠峰培训

网页各种布局的解决方案

作者:

2017-02-05 22:24:55

516

两列布局(左边定宽,右边自适应)

HTML代码如下:

<div class="parent"> 
<div class="left">侧栏</div>
<div class="right">主栏</div>
</div>

思路1:采用float实现.

对parent父节点设置padding-left: 210px; ,对left侧栏节点设置float:left;和margin-left: -210px;,width:200px;,然后对right主栏设置float:left;。最后记得清楚浮动啊,不然parent父节点后面的兄弟节点会受到浮动元素的影响的。

.parent:after{
content:'.';
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}

改进版本:float + margin + (fix)

兼容性很好,适用于多版本浏览器(包括IE6)但是多了层right-fix的结构。但left不可选择,被right-fix盖住。需要设置left的 position: relative;来提高层级。

<div class="parent">
<div class="left">
<p>left</p>
</div>
/*外层在包裹一个容器*/
<div class="right-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}

.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}

.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>

思路2:采用flex实现.

对parent父节点设置display: flex;,对right主栏设置flex: 1;

.parent{ 
display: flex ;
}

.left {
width: 200px;
margin-right: 10px;
}

.right{
/*等价于flex:1 1 0; 增长因子和收缩因子都为1,
基础宽度为0,那么剩余宽度都分配给right*/

flex: 1 ;
}

思路3:使用table实现.

对parent父节点设置display: table;,table-layout: fixed;,对left节点和right节点设置display: table-cell;

.parent {
display: table;
width: 100%;
table-layout: fixed;/*设置表格布局算法,列宽由表格宽度和列宽度设定。*/
}

.left {
display: table-cell;/*让标签元素以表格单元格的形式呈现,类似于td标签*/
width: 200px;
height:200px;
background-color:red;
}

.right {
display: table-cell;/*让标签元素以表格单元格的形式呈现,类似于td标签*/
background-color:green;
/*宽度为剩余宽度*/
}

两列布局(左边不定宽,右边自适应)

思路1:float + overflow.

思路:对parent父节点设置overflow: hidden;,对left节点设置float: left;,对right节点设置overflow: auto;

.parent{
overflow:hidden;
zoom:1;
margin:10px;
}

.left{
float:left;
}

.right{
zoom:1;
overflow:auto;
}

思路2:flex.

对parent父节点设置display: flex;,对right主栏设置flex: 1;

.parent{
display:flex;
}

.left{
margin-right:20px;
}

.right{
flex:1;
}

圣杯布局与双飞翼布局-始于淘宝UED

圣杯布局与双飞翼布局

圣杯布局与双飞翼布局

float实现三列布局

代码如下,这种方式存在问题,middle作为最重要的东西被放在了最后面,浏览器是从上到下解析HTML文档的。

<div class="parent">  
<div class="left">我是左边</div>
<div class="right">我是右边</div>
<div class="middle">我是中间</div>
</div>
.left{
float:left;
background-color: red;
}
.middle{
background-color: yellow;
}
.right{
background-color: green;
float:right;
}

解决方案:

  1. 设置middle节点为float:left,对left节点设置float:left和 margin-left: -100%;,使得left节点移到middle节点的左边平齐。
  2. 设置right节点设置float:left和 margin-left: -right节点的宽度(150px);,使得right节点移到middle节点的右边平齐。
  3. 然后对parent节点设置padding-left: 150px;和padding-right: 150px;。

得到如下的修改结果


更改后的结果

  1. 设置left节点为position: relative;,left: -150px;,使得left节点回到最左边的位置

  2. 设置left节点为position: relative;,right: -150px;,使得right节点回到最左边的位置 
    到这步,就是圣杯布局结束了,(我偷懒,没有写Header和Footer)


更改后的结果

下面是双飞翼布局干的事情了:

  1. 在middle节点下面插入<div class="inner">我是中间</div>,把之前的步骤3,步骤4,步骤5注释掉。加入inner节点的样式为margin-left: 150px;和margin-right: 150px;。

  2. 设置parent节点为height:400px;和overflow: hidden;.设置middle,left,right节点为margin-bottom: -9999px;和padding-bottom: 9999px;使其充满整个parent容器


更改后的结果

全屏布局

.parent{
display:flex;
}

.left{
margin-right:20px;
}

.right{
flex:1;
}

等分布局

.parent{
display:flex;
}

.left{
margin-right:20px;
}

.right{
flex:1;
}

等高布局

.parent{
display:flex;
}

.left{
margin-right:20px;
}

.right{
flex:1;
}

全等四宫格


全等四宫格

tab标签


tab标签

弹窗


弹窗