问题描述
我现在有一个三列布局，暂且以左侧A、中间B和右侧C三个区间来表示。现有要求如下：
- A的宽度固定，为150px
- C的宽度根据内容自动撑开，也就是刚好包裹住其内容， 右侧有15px的留白。
- B的宽度自适应，文字内容居中
演示效果请猛戳
解决思路
- 利用CSS3的flex布局可以解决该问题，但是由于要支持IE8+， 所以这种方法不太合适
- 利用圣杯布局或者淘宝UED提供的双飞翼布局，但是由于双飞翼布局针对固定宽度和或者流体宽度（百分比), 视乎不太适合现在的C宽度自动适应的问题。
- 利用display:table， 可以支持IE8+， 和思路
2一样，C的宽度不是刚好包裹住的
不知道各位有没有什么更好的方法，我的测试代码如下
<!doctype html><html><head> <meta charset="utf-8"></head><body> <p>双飞翼布局，支持IE5.5+</p> <div style=" overflow: hidden;"><div style=" width: 100%; text-align:center; vertical-align:middle; float: left; background: pink; padding-bottom: 5000px; margin-bottom: -5000px; "> <div style=" margin: 0 20% 0 20%;padding:10px; ">Main <p>dddd</p> </div> </div> <div style=" float: left; background: green; margin-left: -100%; width: 20%; padding-bottom: 5000px; margin-bottom: -5000px;">left</div> <div style=" width: 20%; background: red; margin-left: -20%; float: left; padding-bottom: 5000px; margin-bottom: -5000px;">right</div> </div> <p>display:table布局，支持IE8+</p> <hr /> <style> .extFooterSection { display: table; width: auto; } #systemBrandLogo, .eventLinks, #socialLanyon { display: table-cell; } .extFooter-wrapper { display: table-row; } #systemBrandLogo { width: 150px; background: pink; vertical-align: middle; padding-left: 20px; padding-right: 20px; } #systemBrandLogo img { width: 150px; } .eventLinks { width: 100%; list-style: none; margin: 0; padding: 0; background: lightgreen; vertical-align: middle; text-align: center; } .eventLinks li { list-style: none; display: inline; margin: 0; padding: 0; } #socialLanyon { background: lightblue; vertical-align: middle; max-width: 390px; } #socialLanyon a { background: url(https://qa.activestatic.net/images/logos/standardFooterLogosLanyon.png) no-repeat; height: 33px; width: 33px; text-indent: -5000px; display: block; float: left; margin: 0 5px; } #socialLanyon .social1 { background-position: 0 -330px; } #socialLanyon .social2 { background-position: 0 -198px; } #socialLanyon .social3 { background-position: 0 -264px; } a { text-decoration: none; } #socialText, #socialIcons { display: inline-block; } #socialIcons { vertical-align: middle; } </style> <div class="extFooterSection"> <div class='extFooter-wrapper'> <div id="systemBrandLogo"> <a href="http://lanyon.com/solutions/regonline?utm_source=referral&utm_medium=app&utm_campaign=viral_regonline&utm_content=footer_mktg" class="brandLogo" target="_blank" title="Lanyon.com"> <img class="brandLogo mobileVisible" src="https://qa.activestatic.net/images/logos/headerlogo_RegOnline.png"> </a> </div> <ul class="eventLinks"> <li><a class="modalDialog ready" href="">Event Contact Information</a> </li> </ul> <div id="socialLanyon"> <div style='min-width:390px;'> <div id="socialText">Tell others about this event:</div> <div id="socialIcons"><a class="social1" href="">Share on Facebook</a><a class="social2" href="" target="_blank" title="Tweet this on Twitter">Tweet this on Twitter</a><a class="social3" href="" title="Update your LinkedIn Network">Update your LinkedIn Network</a> </div> </div> </div> </div> </div> <hr /> <!-- .hideText{ text-indent: 100%; white-space: nowrap; overflow: hidden; }-->运行效果如下：
2015/03/24日更新
感谢@dianmiao童鞋的回答，也感谢@canrz同学提供的链接，问题解决了。其实没有那么复杂，直接左侧float:left, 右侧float:right，然后中间overflow:hidden即可，但是要注意下DOM结构的顺序即可。
更新后的样例可以猛戳
解决方案
可以利用创建了新的BFC的元素不会和浮动元素重叠来做。简单来说，左侧左浮动，右侧右浮动，中间是创建了新的BFC的元素即可。示例代码：
html<style> .co .left {background:red;width:150px;float:left;} .right {background:blue;margin-right:15px;float:right;} .center {background:green;overflow:hidden;text-align:center;}</style><div class="left">left</div><div class="right">right</div><div class="center">center</div>