阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    CSS 中栏固定宽度,左右两栏宽度自适应

    最简单的是 div 中间居中;可以用 margin 来实现;

    .div1{
        width: 500px;
        height:100px;
        background:orange;
        margin: 0 auto;
        /*margin必须的*/
    }
    

    中间栏固定,左右自适应;

    代码如下,有点像双飞翼布局;

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <STYLE type="text/css">
            *{  margin:0;  padding:0;  }
            body{min-width:800px; }
            /*header footer*/
            #header,#footer{clear:both;padding:10px; text-align:center;background: orange;  }
            /*midel*/
            #wrap div{float: left;}
            #middle{width:600px; height: 200px; background-color:#ccc; }
            #left, #right{ width:50%;margin: 0 0 0 -300px }
            #innerLeft,#innerRight{margin:0 0 0 300px;background-color:#efefef;}
            .inner {padding:12px;}
        </STYLE>
    </head>
    <body>
    <div id="header"><H1>固定中栏宽度, 左右两栏宽度相等和自适应</H1></div>
    <div id="wrap">
        <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>
    </div>
    <div id="footer"><H1>底部</H1></div>
    </body>
    </html>
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    本文目录
    目录