CSS-三栏响应式布局（左右固宽，中间自适应）的五种方法
这种布局方式除了是很常见的面试题，更重要的，他还是很常见的一种页面布局。因此必须要掌握几种制作情况。
这里我先列出几种我总结的，可能有些不足，希望大家也可以留言补充，我再整理成更完善的。
在分条展示实现方案前，我先把通用的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/
CSS-三栏响应式布局（左右固宽，中间自适应）的五种方法的更多相关文章
- 假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法
假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应 <!D ...
- CSS学习笔记——响应式布局
响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...
- css 动画 和 响应式布局和兼容性
14.动画 -moz-:火狐, -ms-:IE,-webkit-:谷歌,-o-:欧朋 transform旋转 rotate旋转 scale放大 translate偏移量 skew倾斜度 transfo ...
- css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- 响应式布局中的CSS相对量
一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...
- web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- 浅谈html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...
- html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为 ...
随机推荐
- django 表单提交 post 、get
介绍 : django项目开发必须懂的知识点,下面使用的数据库是mysql , models.py 数据库表结构, # -*- coding: utf-8 -*-from __future__ im ...
- 【SignalR学习系列】5. SignalR WPF程序
首先创建 WPF Server 端,新建一个 WPF 项目 安装 Nuget 包 替换 MainWindows 的Xaml代码 <Window x:Class="WPFServer.M ...
- 工具 | 代码调试利器fiddle介绍
我们开发的系统运行在用户的环境上,为了保护我们的代码和提升性能,前端javascript是经过压缩的.压缩的代码难于定位,当前只有chrome对压缩的代码支持格式化,但是变量和函数简化后,定位依然困难 ...
- vscode 开发.net core 从安装到部署 教程详解
一:环境准备: windows系统需要 win7 sp1 / windows 8 / windows 2008 r2 sp1 / windows10: 其他版本的windows系统在安装.NET C ...
- 使用Node.js搭建静态资源服务器
对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...
- 怎么关闭wps热点?永久关闭wps右下角弹窗的方法!
wps热点总是开机或者开启WPS后在任务栏闪烁,影响心情,百度了一下找到的方法也过时了.我的是WIN10系统 所以自己摸索了一下,找到了解决办法.其实还是用空白文件替换wps热点的.exe文件,只是这 ...
- 4G内存服务器的MySQL配置优化
公司网站访问量越来越大(日均超10万PV),MySQL自然成为瓶颈,关于 MySQL 的优化,最基本的是 MySQL 系统参数的优化. MySQL对于web架构性能的影响最大,也是关键的核心部分.My ...
- Python网络数据采集7-单元测试与Selenium自动化测试
Python网络数据采集7-单元测试与Selenium自动化测试 单元测试 Python中使用内置库unittest可完成单元测试.只要继承unittest.TestCase类,就可以实现下面的功能. ...
- windows本地提权对照表（转载）
2003 systeminfo>C:\Windows\Temp\temp.txt&(for %i in (KB3057191 KB2840221 KB3000061 KB2850 ...
- little bird
LITTLE BIRD Bzoj 3831 相对而言是一道比较简单的DP,不过它需要用单调队列优化.首先是朴素O(n2), if(d[j]>f[i]) f[i]=min(f[i],f[j]); ...