<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>CSS布局：中栏固定宽度,左右两栏宽度相等同时自适应宽度-懒人图库</title>
<STYLE type="text/css">
*{
margin:0
padding:0
}
body{
font-family:Verdana, Arial, Helvetica, sans-serif
min-width:620px
}
#header,#footer{
clear:both
padding:10px
text-align:center
}
#left,
#right{
float:left
width:50%
margin:0 0 0 -151px
}
#innerLeft,
#innerRight{
margin:0 0 0 151px
background-color:#efefef
}
#middle{
float:left
width:300px
background-color:#ccc
}
.inner {
padding:12px
}
</STYLE>
</head>
<body>
<div style="text-align:centermargin:20px">
<p>作者：<A href="http://www.aoao.org.cn/" target="_blank">aoao</A> 查找更多代码，请访问：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
<p><script type="text/javascript" src="http://d.lanrentuku.com/goto/js-preview-728x90.js"></script></p>
</div>
<DIV id="header">
<H1>固定中栏宽度, 左右两栏宽度相等和自适应</H1></DIV>
<DIV id="left">
<DIV id="innerLeft" class="inner">
<P><STRONG>表现:</STRONG>中间一栏居中与固定宽度，左右两栏宽度相等同时自适应宽度。</P></DIV></DIV>
<DIV id="middle">
<DIV id="innerMiddle" class="inner">
<P><STRONG>原理:</STRONG>利用margin的负值错别固定的宽度，因为要分两边，所以只要错开一中间的固定宽度就行</P></DIV>
</DIV>
<DIV id="right">
<DIV id="innerRight" class="inner">
<P><STRONG>问题:</STRONG>IE对宽度乘百分比的计算不大好，有必要牺牲一两px的显示，IE6也没最小宽度。</P></DIV></DIV>
</body>
</html>。
实现方式：左右元素浮动，中间元素左右marign值撑开两边距离。
例：
此时看似没有问题，可是如果中间内容过多，超出左右两边高度，我们将看到 文字环绕 问题，如下如所示。
解决办法：
补充flex左右布局，左边固定，右边自适应，并且两列等高自适应
