设为首页  |  SEO论坛  |  CSS在线手册  |  收藏本站  |  
您的位置:seo俱乐部 >> CSS教程 >> CSS+DIV标准布局（一行三列）
  •  
  •  

    CSS+DIV标准布局（一行三列）

  •         2007-9-29 22:29:23    点击率:

  • 一行三列

    一行三列 (1)：左右列都绝对定位(右列定位在右上)。左列和右列固定宽度，中间列自适应页面。


    #left {
     position: absolute;
     top: 0px;
     left: 0px;
     margin: 20px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 120px;
     }
    html>body #left {
     width: 120px; /* ie5win fudge ends */
     }
    #middle {
     margin: 20px 190px 20px 190px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     }
    #right {
     position: absolute;
     top: 0px;
     right: 0px; /* Opera5.02 will show a space
     at right when there is no scroll bar */
     margin: 20px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 120px;
     }
    html>body right {
     width: 120px; /* ie5win fudge ends */
     }

    下载全部样式

    一行三列 (2)：左列定位在左上，右列定位在右上，中间列浮在左列右面。左列和右列固定宽度，中间列自适应页面。


    #left {
     position: absolute;
     top: 0px;
     left: 0px;
     margin: 20px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 120px;
     }
    html>body #left {
     width: 120px; /* ie5win fudge ends */
     }
    #middle {
     margin: 20px 190px 20px 190px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     }
    body>#middle {
     float: left; /* required by N6.01Win,
     and must be hidden from IE5Win. */
     }
    #right {
     position: absolute;
     top: 0px;
     right: 0px; /* Opera5.02 will show a space
     at right when there is no scroll bar */
     margin: 20px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 120px;
     }
    html>body #right {
     width: 120px; /* ie5win fudge ends */
     }

    下载全部样式

    一行三列 (3)：三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应。

    #left {
     position: absolute;
     top: 0px;
     left: 0px;
     margin: 20px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 120px;
     }
    html>body #left {
     width: 120px; /* ie5win fudge ends */
     }
    #middle {
     position: absolute;
     margin: 20px 190px 20px 190px;
     top: 0px;
     left: 0px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     }
    #right {
     position: absolute;
     top: 0px;
     right: 0px; /* Opera5.02 will show a space
     at right when there is no scroll bar */
     margin: 20px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 120px;
     }
    html>body #right {
     width: 120px; /* ie5win fudge ends */
     }

    下载全部样式

    一行三列 4(推荐)：类似样式2，只是将margin: 20px属性增加在body样式中，解决了中间列在Netscape6.0中置顶的问题。

    body {
     margin: 20px 0px 0px 0px;
      /* n6.01win-mac won't recognize top margin
      for middle box, so it goes here */
     padding: 0px 0px 0px 0px;
     font-family: verdana, arial, helvetica, sans-serif;
     color: #060;
     background-color: #CCC;
     }
    #left {
     position: absolute;
     top: 0px;
     left: 0px;
     margin: 20px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 120px;
     }
    html>body #left {
     width: 120px; /* ie5win fudge ends */
     }
    #middle {
     margin: 0px 190px 20px 190px; /* n6.01win n6mac
     won't recognize top margin for middle box, so it
     goes in body */
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     }
    #right {
     position: absolute;
     top: 0px;
     right: 0px; /* Opera5.02 will show a space at right
     swhen there is no scroll bar */
     margin: 20px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 120px;
     }
    html>body #right {
     width: 120px; /* ie5win fudge ends */
     }

    下载全部样式

    一行三列 (5)：左右列绝对定位，中间列自适应。宽度满屏。

    #left {
     position: absolute;
     top: 0px;
     left: 0px;
     margin: 0px;
     padding: 10px;
     border: 0px;
     background: #FFF;
     width: 190px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 170px;
     }
    html>body #left {
     width: 170px; /* ie5win fudge ends */
     }
    #middle {
     padding: 10px;
     border: 0px;
     background: #FFF;
     /* ie5win fudge begins */
     margin: -20px 190px 0px 190px;
     voice-family: "\"}\"";
     voice-family:inherit;
     margin-top: 0px;
     }
    html>body #middle {
     margin-top: 0px; /* ie5win fudge ends */
     }
    #right {
     position: absolute;
     top: 0px;
     right: 0px; /* Opera5.02 will show a space at right
     when there is no scroll bar */
     margin: 0px;
     padding: 10px;
     border: 0px;
     background: #FFF;
     width: 190px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 170px;
     }
    html>body #right {
     width: 170px; /* ie5win fudge ends */
     }

    下载全部样式

    顶行三列

    顶行三列 1(推荐)：顶行自适应页面宽度。左右列绝对定位，中间列自适应页面。

    #top {
     margin: 20px 20px 0px 20px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     height: 100px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     height: 70px;
     }
    html>body #top {
     height: 70px; /* ie5win fudge ends */
     }
    #left {
     position: absolute;
     top: 120px;
     left: 0px;
     margin: 20px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 120px;
     }
    html>body #left {
     width: 120px; /* ie5win fudge ends */
     }
    #middle {
     margin: 20px 190px 20px 190px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     }
    #right {
     position: absolute;
     top: 120px;
     right: 0px; /* Opera5.02 will show a space
     at right when there is no scroll bar */
     margin: 20px;
     padding: 10px;
     border: 5px solid #666;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 120px;
     }
    html>body #right {
     width: 120px; /* ie5win fudge ends */
     }

    下载全部样式

    顶行三列 {2)：宽度满屏

    #top {
     margin: 0px 0px 0px 0px;
     padding: 10px;
     border: 0px;
     background: #999;
     height: 100px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     height: 80px;
     }
    html>body #top {
     height: 80px; /* ie5win fudge ends */
     }
    #left {
     position: absolute;
     top: 100px;
     left: 0px;
     margin: 0px;
     padding: 10px;
     border: 0px;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 130px;
     }
    html>body #left {
     width: 130px; /* ie5win fudge ends */
     }
    #middle {
     padding: 10px;
     border: 0px;
     background: #FFF;
     margin: 0px 150px 0px 150px;
     }
    #right {
     position: absolute;
     top: 100px;
     right: 0px; /* Opera5.02 will show a space
     at right when there is no scroll bar */
     margin: 0px;
     padding: 10px;
     border: 0px;
     background: #FFF;
     width: 150px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 130px;
     }
    html>body #right {
     width: 130px; /* ie5win fudge ends */
     }

    下载全部样式

      >>如有疑问，欢迎进入SEO俱乐部论坛参与讨论。
  • 上一篇：如何区分ID和class的用法
    下一篇：CSS+DIV标准布局（一行两列）
  • 推荐文章
  • SEO常见问题解答
  • 本月排行
  • 赞助商链接
本站部分信息来自网络，如有版权争议，请给我们来信并说明源由，我们将在三个工作日内作出处理。E-mail:seoclub#seoclub.net   | 关于SeoClub | 网站地图
本站法律顾问:黄锋  ◎SeoClub.net all rights reserved.  粤ICP备08001990号