问题描述

我现在有一个三列布局，暂且以左侧A、中间B和右侧C三个区间来表示。现有要求如下：

A的宽度固定，为150px
C的宽度根据内容自动撑开，也就是刚好包裹住其内容，右侧有15px的留白。
B的宽度自适应，文字内容居中

演示效果请猛戳

解决思路

利用CSS3的flex布局可以解决该问题，但是由于要支持IE8+，所以这种方法不太合适
利用圣杯布局或者淘宝UED提供的双飞翼布局，但是由于双飞翼布局针对固定宽度和或者流体宽度（百分比), 视乎不太适合现在的C宽度自动适应的问题。
利用display:table，可以支持IE8+，和思路2一样，C的宽度不是刚好包裹住的

不知道各位有没有什么更好的方法，我的测试代码如下





    





    双飞翼布局，支持IE5.5+
    



            
Main
                
dddd
            
        


        left
        right
    



    display:table布局，支持IE8+

    

    

    
        

            

                
                    
                
            
            
                Event Contact Information
                
            
            
                

                    
Tell others about this event:
                    Share on FacebookTweet this on TwitterUpdate your LinkedIn Network

运行效果如下：

2015/03/24日更新

感谢@dianmiao童鞋的回答，也感谢@canrz同学提供的链接，问题解决了。其实没有那么复杂，直接左侧float:left, 右侧float:right，然后中间overflow:hidden即可，但是要注意下DOM结构的顺序即可。

更新后的样例可以猛戳

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> <p class="left">left</p> <p class="right">right</p> <p class="center">center</p>

全部回复(3)

PHP中文网2017-04-17 11:25:45 3楼

可以利用创建了新的BFC的元素不会和浮动元素重叠来做。简单来说，左侧左浮动，右侧右浮动，中间是创建了新的BFC的元素即可。示例代码：