CSS中三列布局的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS中三列布局的问题

2016-05-26 17:37:24 2002 1

问题描述
我现在有一个三列布局,暂且以左侧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&amp;utm_medium=app&amp;utm_campaign=viral_regonline&amp;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;
    }
-->
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:16:40

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

    <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>
    0 0
相关问答

1

回答

请问静态文件CSS和JS,在SERVERLESS DEVOPS 发布后加载不了怎么处理?PYTHON

2022-08-22 12:43:44 270浏览量 回答数 1

26

回答

我存放在OSS里面的js文件和css文件访问的时候都乱码了,请问怎么回事呀

2022-03-02 17:45:44 31145浏览量 回答数 26

1

回答

JSP页面好像引入不了js,css文件,需要设置什么吗?:报错

2020-06-14 11:04:14 569浏览量 回答数 1

1

回答

nginx反向代理后 js css文件不加载:报错

2020-06-14 07:51:58 565浏览量 回答数 1

1

回答

为什么最好把CSS的<link>标签放在<head></head>之间?为什么最好把JS的<scri

2019-11-18 13:28:31 2441浏览量 回答数 1

0

回答

Xamarin WebView 使用 html+js+css如何开发app

2019-09-19 18:27:15 623浏览量 回答数 0

3

回答

[@小川游鱼][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

2018-12-16 03:12:33 2995浏览量 回答数 3

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

2018-10-27 21:52:43 149111浏览量 回答数 31

1

回答

云虚拟主机无法客户端无法加载js css png 等静态文件

2018-09-29 11:29:22 675浏览量 回答数 1

1

回答

某个任意类型文件在head部分读到就开始载入,类似css&js 可以吗

2016-06-14 17:21:46 1852浏览量 回答数 1
+关注
文章
问答
问答排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
Java开发手册-孤尽秘传版
立即下载
低代码开发师(初级)实战教程
立即下载