这种布局方式除了是很常见的面试题，更重要的，他还是很常见的一种页面布局。因此必须要掌握几种制作情况。
这里我先列出几种我总结的，可能有些不足，希望大家也可以留言补充，我再整理成更完善的。
在分条展示实现方案前，我先把通用的css贴一下：
*{
margin: 0;
padding: 0;
}
html{
font-family: "微软雅黑";
}
ul li{
list-style: none;
}
a:link,a:hover{
text-decoration: none;
}
.clearfix{
*zoom:1;
}
.clearfix:after{
height: 0;
clear: both;
content: "";
visibility: hidden;
display: block;
}
.fl{
float: left;
}
.fr{
float: right;
}
h3,.tips-info{
margin: 8px 0;
font-size: 14px;
}
li{
margin-bottom: 10px
}
.tips,ol{
background: #fffbfb;
padding: 10px 20px;
}
.tips-ex{
font-size: 12px;
color: #99c1c1;
}
.block{
padding: 10px 20px;
border-top: 5px solid #99c1c1;
margin: 30px 0 0px;
background: #f5f5f5;
}
.browser,.container{
padding: 20px;
}
.container{
font-size: 14px;
}
.container,.img-box{
background: #eee;
border: 1px solid #999;
}
.box{
background: #fff;
padding: 20px;
border: 1px solid #999;
}
.team-box{
width: 158px;
}
.info-box{
}
.person-box{
width: 78px;
}
.person-box .img-box{
margin-bottom: 20px;
}
.person-box .img-box:last-child{
margin: 0;
}
.img-box{
width: 78px;
}
.img-txt{
line-height: 20px;
margin: 20px 0;
text-align: center;
padding: 0 5px;
}
.team-name{
width: 78px;
height: 80px;
text-align: center;
}
主要是以下几种方案基础代码、无关痛痒的样式代码和左中右三栏各自需要提前固定的尺寸代码。
以下分几种情况实现：
第一种，float布局实现
这绝对是我大脑能第一下想到的！
左右两栏分别左浮动、右浮动。
中间栏使用margin/padding撑开左右两栏需要占据的位置即可。
代码：
html：
<div class="browser">
<div class="container f-cont clearfix">
<div class="box team-box clearfix">
<div class="img-box">
<div class="img-txt">团队logo 80x80</div>
</div>
<div class="team-name">团队名称</div>
</div>
<div class="box person-box clearfix">
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
</div>
<div class="box info-box">
<div>
<h3>关于你们团队的介绍</h3>
<span>可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）</span>
<p>页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。</p>
<h3>又一个小标题</h3>
<p>
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
</p>
</div>
</div>
</div>
</div>
css关键点：
.f-cont .team-box,.img-box,.team-name{
float: left;
}
.f-cont .person-box{
float: right;
}
.f-cont .info-box,.p-cont .info-box{
margin: 0 140px 0 220px;
}
看下动态效果：
第二种，定位布局+margin
左右栏分别使用absolute定位，同float一样，左边的定位left 0，右边的定位right 0；
中间还是用margin或padding撑开左右栏需要占据的位置即可。（利用了浮动或定位时，结构飘起来不占据文档空间的特点）
代码：
html：
<div class="browser">
<div class="container p-cont">
<div class="box team-box clearfix">
<div class="img-box">
<div class="img-txt">团队logo 80x80</div>
</div>
<div class="team-name">团队名称</div>
</div>
<div class="box info-box">
<div>
<h3>关于你们团队的介绍</h3>
<span>可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）</span>
<p>页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。</p>
<h3>又一个小标题</h3>
<p>
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
</p>
</div>
</div>
<div class="box person-box clearfix">
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
</div>
</div>
</div>
css：
.p-cont{
position: relative;
height: 430px;
}
.p-cont .team-box,.p-cont .person-box{
position: absolute;
top: 20px;
z-index: 9;
}
.p-cont .team-box{
left: 20px;
}
.p-cont .person-box{
right: 20px;
}
不足：
不过这种布局有点缺点就是，父元素需要设置固定高度，中间自适应时，如果内容过多而宽度又过窄，会导致高度*增加，严重时冲破父元素高度，产生溢出的现象：
第三种，display-table 实现
父元素display：table；
左右子元素使用display：table-cell；
中间正常文档流，margin撑开间距即可
代码：
html：
<div class="browser">
<div class="container d-cont">
<div class="cell">
<div class="box team-box clearfix">
<div class="img-box">
<div class="img-txt">团队logo 80x80</div>
</div>
<div class="team-name">团队名称</div>
</div>
</div>
<div class="box info-box">
<div>
<h3>关于你们团队的介绍</h3>
<span>可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）</span>
<p>页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。</p>
<h3>又一个小标题</h3>
<p>
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
</p>
</div>
</div>
<div class="cell">
<div class="box person-box clearfix">
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
</div>
</div>
</div>
</div>
css：
.d-cont{
display: table;
}
.d-cont .cell{
display: table-cell;
vertical-align: top;
}
.d-cont .info-box{
margin: 0 20px;
}
看下效果：
第四种，浮动 + margin负边距
代码：
html：
<div class="browser">
<div class="container m-cont clearfix">
<div class="m-c">
<div class="box info-box">
<div>
<h3>关于你们团队的介绍</h3>
<span>可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）</span>
<p>页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。</p>
<h3>又一个小标题</h3>
<p>
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
</p>
</div>
</div>
</div>
<div class="m-l">
<div class="box team-box clearfix">
<div class="img-box">
<div class="img-txt">团队logo 80x80</div>
</div>
<div class="team-name">团队名称</div>
</div>
</div>
<div class="m-r">
<div class="box person-box clearfix">
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
</div>
</div>
</div>
</div>
css：
.m-l,.m-c,.m-r{
float: left;
}
.m-l{
margin-left: -100%;
}
.m-c{
margin: 0 140px 0 220px;
}
.m-r{
margin-left: -120px;
}
效果：
第五种，css3 - flex
代码：
html：
<div class="browser">
<div class="container fx-cont">
<div class="cell">
<div class="box team-box clearfix">
<div class="img-box">
<div class="img-txt">团队logo 80x80</div>
</div>
<div class="team-name">团队名称</div>
</div>
</div>
<div class="cell">
<div class="box info-box">
<div>
<h3>关于你们团队的介绍</h3>
<span>可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）</span>
<p>页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。</p>
<h3>又一个小标题</h3>
<p>
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
</p>
</div>
</div>
</div>
<div class="cell">
<div class="box person-box clearfix">
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
</div>
</div>
</div>
</div>
css：
.fx-cont{
display: -webkit-flex;
display: flex;
}
.fx-cont .info-box{
flex: 1;
margin: 0 20px;
}
整篇源代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xing.org1^ guojufeng">
<title>三栏布局-中间自适应的写法总结</title>
<link rel="stylesheet" href="style.css">
</head> <body>
<!-- 1 float -->
<h3 class="block">第一种方法-float</h3>
<div class="tips">
<h4 class="tips-info">关键点</h4>
<ol>
<li>结构顺序：左，中，右</li>
<li>中间盒模型的margin-left、margin-right分别是左右盒模型的宽度、障眼法:中间盒模型使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。</li>
<li>注意，结构上，左边盒模型、右边盒模型、中间盒模型</li>
</ol>
</div>
<div class="browser">
<div class="container f-cont clearfix">
<div class="box team-box clearfix">
<div class="img-box">
<div class="img-txt">团队logo 80x80</div>
</div>
<div class="team-name">团队名称</div>
</div>
<div class="box person-box clearfix">
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
</div>
<div class="box info-box">
<div>
<h3>关于你们团队的介绍</h3>
<span>可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）</span>
<p>页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss
中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window
中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。</p>
<h3>又一个小标题</h3>
<p>
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
</p>
</div>
</div>
</div>
</div> <!-- 2 position -->
<h3 class="block top">第二种方法-position+margin</h3>
<div class="tips">
<h4 class="tips-info">关键点</h4>
<ol>
<li>结构顺序：左，中，右</li>
<li>position:absolute;之后的父元素塌陷</li>
</ol>
</div>
<div class="tips">
<h4 class="tips-info">缺点</h4>
<ol>
<li>父元素设置固定高度，中间结构超出高度会溢出</li>
</ol>
</div>
<div class="browser">
<div class="container p-cont">
<div class="box team-box clearfix">
<div class="img-box">
<div class="img-txt">团队logo 80x80</div>
</div>
<div class="team-name">团队名称</div>
</div>
<div class="box info-box">
<div>
<h3>关于你们团队的介绍</h3>
<span>可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）</span>
<p>页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss
中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window
中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。</p>
<h3>又一个小标题</h3>
<p>
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
</p>
</div>
</div>
<div class="box person-box clearfix">
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
</div>
</div>
</div> <!-- 3 display-->
<h3 class="block top">第三种方法--display：table-cell</h3>
<div class="tips">
<h4 class="tips-info">关键点</h4>
<ol>
<li>结构顺序：左，中，右</li>
<li>父元素display:table;</li>
<li>左右两个子元素display：table-cell；vertical-align：center，中间盒子不用管。</li>
<li>左右两个子元素加一个包裹，因为高度会盛满父元素</li> <li>display：table-cell；——不支持ie6,7</li>
</ol>
</div>
<div class="browser">
<div class="container d-cont">
<div class="cell">
<div class="box team-box clearfix">
<div class="img-box">
<div class="img-txt">团队logo 80x80</div>
</div>
<div class="team-name">团队名称</div>
</div>
</div>
<div class="box info-box">
<div>
<h3>关于你们团队的介绍</h3>
<span>可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）</span>
<p>页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss
中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window
中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。</p>
<h3>又一个小标题</h3>
<p>
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
</p>
</div>
</div>
<div class="cell">
<div class="box person-box clearfix">
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
</div>
</div>
</div>
</div>
<!-- 4 margin-->
<h3 class="block top">第4种方法--圣杯布局【margin负边距布局】</h3>
<div class="tips">
<h4 class="tips-info">关键点</h4>
<ol>
<li>结构上，中间盒模型在前面【重要】，左右两边的顺序随意，但最好是中，左，右的顺序来。</li>
<li>三个模块外边都要加一个父元素-包裹用的div，这个父div的float：left；【三个都有左浮动】</li>
<li>中间盒模型margin-left、margin-right等于左右结构的宽度，</li>
<li>左边父div的margin-left:-100%;
<span class="tips-ex">100%的来源，其实是中间盒模型的宽度.这里我中间没设置宽度所以就是100%</span>
</li>
<li>右边父div的margin-left:-盒子宽度px;
<span class="tips-ex">右边只需要向左移动自己宽度的大小就能回到原位置。</span>
</li>
<li>最外边清楚浮动</li>
</ol>
</div>
<div class="browser">
<div class="container m-cont clearfix">
<div class="m-c">
<div class="box info-box">
<div>
<h3>关于你们团队的介绍</h3>
<span>可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）</span>
<p>页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss
中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window
中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。</p>
<h3>又一个小标题</h3>
<p>
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
</p>
</div>
</div>
</div>
<div class="m-l">
<div class="box team-box clearfix">
<div class="img-box">
<div class="img-txt">团队logo 80x80</div>
</div>
<div class="team-name">团队名称</div>
</div>
</div>
<div class="m-r">
<div class="box person-box clearfix">
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
</div>
</div>
</div>
</div>
<!-- 5 flex-->
<h3 class="block top">第5种方法--css3 flex</h3>
<div class="tips">
<h4 class="tips-info">关键点</h4>
<ol>
<li>结构顺序：左，中，右</li>
<li>三个盒子分别需要给一个div外包裹，好让内部的实际内容高度自定义。因为用了flex和用了table-cell感觉一样，高度会和父元素高度一致</li>
<li>三个盒子的父元素设置display：flex；</li>
<li>中间盒子设置flex： 1；让他填充父元素剩下的地方.并根据需要设置边距和左右隔开</li>
</ol>
</div>
<div class="browser bottom">
<div class="container fx-cont">
<div class="cell">
<div class="box team-box clearfix">
<div class="img-box">
<div class="img-txt">团队logo 80x80</div>
</div>
<div class="team-name">团队名称</div>
</div>
</div>
<div class="cell">
<div class="box info-box">
<div>
<h3>关于你们团队的介绍</h3>
<span>可以给我们解释一下团队名称得来历，或是分别介绍你们的团队成员。（以下为示例）</span>
<p>页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss
中指定的样式规则。index.json 是页面的配置文件：页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window
中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。</p>
<h3>又一个小标题</h3>
<p>
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
</p>
</div>
</div>
</div>
<div class="cell">
<div class="box person-box clearfix">
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
<div class="img-box">
<div class="img-txt">个人logo 80x80</div>
</div>
</div>
</div>
</div>
</div>
</body> </html>
index.html
/*
* @Author: @Guojufeng
* @Date: 2017-09-05 12:58:07
* @Last Modified by: @Guojufeng
* @Last Modified time: 2018-12-11 11:51:48
*/
*{
margin:;
padding:;
}
html{
font-family: "微软雅黑";
}
ul li{
list-style: none;
}
a:link,a:hover{
text-decoration: none;
}
.clearfix{
*zoom:;
}
.clearfix:after{
height:;
clear: both;
content: "";
visibility: hidden;
display: block;
}
.fl{
float: left;
}
.fr{
float: right;
}
h3,.tips-info{
margin: 8px 0;
font-size: 14px;
}
li{
margin-bottom: 10px
}
.tips,ol{
background: #fffbfb;
padding: 10px 20px;
}
.tips-ex{
font-size: 12px;
color: #99c1c1;
}
.block{
padding: 10px 20px;
border-top: 5px solid #99c1c1;
margin: 30px 0 0px;
background: #f5f5f5;
}
.browser,.container{
padding: 20px; }
.container{
font-size: 14px;
}
.container,.img-box{
background: #eee;
border: 1px solid #999;
}
.box{
background: #fff;
padding: 20px;
border: 1px solid #999;
}
.team-box{
width: 158px;
}
.info-box{ }
.person-box{
width: 78px;
}
.person-box .img-box{
margin-bottom: 20px;
}
.person-box .img-box:last-child{
margin:;
}
.img-box{
width: 78px;
}
.img-txt{
line-height: 20px;
margin: 20px 0;
text-align: center;
padding: 0 5px;
}
.team-name{
width: 78px;
height: 80px;
text-align: center;
}
/* others */
.top{
margin-top: 150px;
}
.bottom{
margin-bottom: 150px;
} /*不同*/
.f-cont .team-box,.img-box,.team-name{
float: left;
}
.f-cont .person-box{
float: right;
}
.f-cont .info-box,.p-cont .info-box{
margin: 0 140px 0 220px;
}
/**/
.p-cont{
position: relative;
height: 430px;
}
.p-cont .team-box,.p-cont .person-box{
position: absolute;
top: 20px;
z-index:;
}
.p-cont .team-box{
left: 20px;
}
.p-cont .person-box{
right: 20px;
}
/**/
.d-cont{
display: table;
}
.d-cont .cell{
display: table-cell;
vertical-align: top;
}
.d-cont .info-box{
margin: 0 20px;
}
/**/
.m-l,.m-c,.m-r{
float: left;
}
.m-l{
margin-left: -100%;
}
.m-c{
margin: 0 140px 0 220px;
}
.m-r{
margin-left: -120px;
}
/**/
.fx-cont{
display: -webkit-flex;
display: flex;
}
.fx-cont .info-box{
flex:;
margin: 0 20px;
}
style.css
声明：
请尊重博客园原创精神，转载或使用图片请注明：
博主：xing.org1^
出处：http://www.cnblogs.com/padding1015/