CSS基本布局16例

CSS基本布局16例

单行单列


  • 此主题相关图片如下：
    按此在新窗口浏览图片 单行单列1：采用float浮在左上角，固定宽度。
#content {
 float: left;
 padding: 10px;
 margin: 20px;
 background: #FFF;
 border: 5px solid #666;
 width: 400px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 370px;
 }
html>body #content {
 width: 370px; /* ie5win fudge ends */
 }

  • 此主题相关图片如下：
    按此在新窗口浏览图片 单行单列2：固定在左上角，固定宽度，采用的是绝对(absolute)定位。 
#content {
 position: absolute;
 top: 0px;
 left: 0px;
 padding: 10px;
 margin: 20px;
 background: #FFF;
 border: 5px solid #666;
 width: 400px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 370px;
 }
html>body #content {
 width: 370px; /* ie5win fudge ends */
 }

  • 此主题相关图片如下：
    按此在新窗口浏览图片 单行单列3：固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面。 
#content {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 20px;
 background: #FFF;
 border: 5px solid #666;
 width: 74%; /* ie5win fudge begins */
 padding: 10px 10% 10px 15%;
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 55%;
 padding: 10px 9% 10px 11%;
 }
html>body #content {
 width: 55%;
 padding: 10px 9% 10px 11%;
 } /* ie5win fudge ends */

  • 此主题相关图片如下：
    按此在新窗口浏览图片 单行单列4(推荐)：固定宽度，采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。
body {
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 font-family: verdana, arial, helvetica, sans-serif;
 color: #c060;
 background-color: #CCC;
 text-align: center;
 /* part 1 of 2 centering hack */
 }
#content {
 width: 400px; 
 padding: 10px;
 margin-top: 20px;
 margin-bottom: 20px;
 margin-right: auto;
 margin-left: auto;  
 /* opera does not like 'margin:20px auto' */
 background: #FFF;
 border: 5px solid #666;
 text-align:left; 
 /* part 2 of 2 centering hack */
 width: 400px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 370px;
 }
html>body #content {
 width: 370px; /* ie5win fudge ends */
 }



发贴心情 

单行两列


  • 此主题相关图片如下：
    按此在新窗口浏览图片 单行两列1：两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边。
左边 
#content {
 float: left;
 padding: 10px;
 margin: 20px;
 background: #FFF;
 border: 5px solid #666;
 width: 300px; 
 /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 270px;
 }
html>body #content {
 width: 270px; 
 /* ie5win fudge ends */
 }
右边 
#content2 {
 float: left;
 padding: 10px;
 margin: 20px;
 background: #FFF;
 border: 5px solid #666;
 width: 300px; 
 /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 270px;
 }
html>body #content2 {
 width: 270px; 
 /* ie5win fudge ends */
 }

  • 此主题相关图片如下：
    按此在新窗口浏览图片 单行两列2：两列都百分比宽度，但不满屏。第一列固定在左上角，第二列浮在第一列右边。
左上 
#content {
 float: left;
 padding: 10px 2% 10px 2%;
 margin: 20px 1% 20px 2%;
 background: #FFF;
 border: 5px solid #666;
 width: 44%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 41%;
 }
html>body #content {
 width: 41%; /* ie5win fudge ends */
 }
右下 
#content2 {
 float: right;
 padding: 10px 2% 10px 2%;
 margin: 20px 2% 20px 1%;
 background: #FFF;
 border: 5px solid #666;
 width: 44%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 41%;
 }
html>body #content2 {
 width: 41%; /* ie5win fudge ends */
 }

  • 此主题相关图片如下：
    按此在新窗口浏览图片 单行两列3：两列都百分比宽度，满屏。两列都采用绝对定位。
左 
#content {
 position: absolute;
 top: 0px;
 left: 0px;
 padding: 10px 2% 10px 2%;
 margin: 0px;
 border: 0px;
 background: #FFF;
 width: 50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 46%;
 }
html>body #content {
 width: 46%; /* ie5win fudge ends */
 }
右 
#content2 {
 position: absolute;
 top: 0px;
 right: 0px; /* Opera5.02 will show a 
 space at right when there is no scroll bar */
 padding: 10px 2% 10px 2%;
 margin: 0px;
 border: 0px;
 background: #FFF;
 width: 50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 46%;
 }
html>body #content2 {
 width: 46%; /* ie5win fudge ends */
 } 
 /* Opera5.02 shows a 2px gap between. 
 N6.01Win sometimes does. Depends on amount 
 of fill and window size and wind direction. */

  • 此主题相关图片如下：
    按此在新窗口浏览图片 单行两列4：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在右上角。
左上 
#content {
 float: left;
 padding: 10px 2% 10px 2%;
 margin: 0px;
 border: 0px;
 background: #FFF;
 width: 50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 46%;
 }
html>body #content {
 width: 46%; /* ie5win fudge ends */
 }
右下 
#content2 {
 float: right; /* Opera5.02 will show a 
 space at right when there is no scroll bar */
 padding: 10px 2% 10px 2%;
 margin: 0px;
 border: 0px;
 background: #FFF;
 width: 50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 46%;
 }
html>body #content2 {
 width: 46%; /* ie5win fudge ends */
 } /* Opera5.02 shows a 2px gap between. 
 N6.01Win sometimes does. Depends on amount of 
 fill and window size and wind direction. */

  • 此主题相关图片如下：
    按此在新窗口浏览图片 单行两列5：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在第一列右边。 
#content {
 float: left;
 padding: 10px 2% 10px 2%;
 margin: 0px;
 border: 0px;
 background: #FFF;
 width: 50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 46%;
 }
html>body #content {
 width: 46%; /* ie5win fudge ends */
 }
#content2 {
 float: left; 
 /* Opera5.02 will show a space at 
 right when there is no scroll bar */
 padding: 10px 2% 10px 2%;
 margin: 0px;
 border: 0px;
 background: #FFF;
 width: 50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 46%;
 }
html>body #content2 {
 width: 46%; /* ie5win fudge ends */
 }
发贴心情 

单行三列


  • 此主题相关图片如下：
    按此在新窗口浏览图片 单行三列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 */
 }
posted @ 2005-03-01 12:07  swordzj  阅读(196)  评论(0)  编辑  收藏  举报