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

🌙
手机阅读
本文目录结构
a'xi'he

最简单的是 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>
axihe
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang
axihe