问

html5 - CSS中三列布局的问题

 手机用户2502853601 发布于 2022-11-06 11:46
  • css
  • html
  • char
  • utf-8
  • overflow
  • text
    • 问题描述

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

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

    演示效果请猛戳

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

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

    



    





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



    
            
    Main
                
    dddd
    
            
    
        
    


        
    left
    
        
    right
    
    
    



    
    display:table布局，支持IE8+
    

    
    

    

    
    
        
    
            
    
            
            
    
                
    
                    
    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结构的顺序即可。

    更新后的样例可以猛戳

    3 个回答

    • 右侧宽度也不固定？宽高起码得固定一个吧，不然怎么根据内容进行自适应？
      三栏布局可以参考文章：
      http://www.zhangxinxu.com/wordpress/2009/11/我熟知的三种三栏网页宽度自适应布局方法/

      2022-11-12 01:53 回答

    • 你可以使用 弹性盒布局的，参考：https://developer.mozilla.org/zh-CN/docs/CSS/Tutorials/Using_CSS_flexible_boxes

      2022-11-12 01:53 回答

    • 可以利用创建了新的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>
<p class="left">left</p>
<p class="right">right</p>
<p class="center">center</p>
      2022-11-12 01:53 回答
    撰写答案
    今天，你开发时遇到什么问题呢？
    立即提问
    热门标签
    PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有