阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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>
      
      目录
      本文目录
      目录