CSS基本布局16例

CSS基本布局16例

单行单列

• 
  此主题相关图片如下：
  单行单列1：采用float浮在左上角，固定宽度。

#content {
 float: left;
 padding: 10px;
 margin: 20px;
 background: #FFF;
 border: 5px solid #666;
  400px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  370px;
 }
html>body #content {
  370px; /* ie5win fudge ends */
 }

• 
  此主题相关图片如下：
  单行单列2：固定在左上角，固定宽度，采用的是绝对(absolute)定位。

#content {
 position: absolute;
 top: 0px;
 left: 0px;
 padding: 10px;
 margin: 20px;
 background: #FFF;
 border: 5px solid #666;
  400px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  370px;
 }
html>body #content {
  370px; /* ie5win fudge ends */
 }

• 
  此主题相关图片如下：
  单行单列3：固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面。

#content {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 20px;
 background: #FFF;
 border: 5px solid #666;
  74%; /* ie5win fudge begins */
 padding: 10px 10% 10px 15%;
 voice-family: "\"}\"";
 voice-family:inherit;
  55%;
 padding: 10px 9% 10px 11%;
 }
html>body #content {
  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 {
  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 */
  400px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  370px;
 }
html>body #content {
  370px; /* ie5win fudge ends */
 }

 

单行两列

• 
  此主题相关图片如下：
  单行两列1：两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边。

左边

#content {
 float: left;
 padding: 10px;
 margin: 20px;
 background: #FFF;
 border: 5px solid #666;
  300px; 
 /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  270px;
 }
html>body #content {
  270px; 
 /* ie5win fudge ends */
 }

右边

#content2 {
 float: left;
 padding: 10px;
 margin: 20px;
 background: #FFF;
 border: 5px solid #666;
  300px; 
 /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  270px;
 }
html>body #content2 {
  270px; 
 /* ie5win fudge ends */
 }

• 
  此主题相关图片如下：
  单行两列2：两列都百分比宽度，但不满屏。第一列固定在左上角，第二列浮在第一列右边。

左上

#content {
 float: left;
 padding: 10px 2% 10px 2%;
 margin: 20px 1% 20px 2%;
 background: #FFF;
 border: 5px solid #666;
  44%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  41%;
 }
html>body #content {
  41%; /* ie5win fudge ends */
 }

右下

#content2 {
 float: right;
 padding: 10px 2% 10px 2%;
 margin: 20px 2% 20px 1%;
 background: #FFF;
 border: 5px solid #666;
  44%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  41%;
 }
html>body #content2 {
  41%; /* ie5win fudge ends */
 }

• 
  此主题相关图片如下：
  单行两列3：两列都百分比宽度，满屏。两列都采用绝对定位。

左

#content {
 position: absolute;
 top: 0px;
 left: 0px;
 padding: 10px 2% 10px 2%;
 margin: 0px;
 border: 0px;
 background: #FFF;
  50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  46%;
 }
html>body #content {
  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;
  50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  46%;
 }
html>body #content2 {
  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;
  50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  46%;
 }
html>body #content {
  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;
  50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  46%;
 }
html>body #content2 {
  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;
  50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  46%;
 }
html>body #content {
  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;
  50%; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  46%;
 }
html>body #content2 {
  46%; /* ie5win fudge ends */
 }

 

单行三列

• 
  此主题相关图片如下：
  单行三列1：左右列都绝对定位(右列定位在右上)。左列和右列固定宽度，中间列自适应页面。

#left {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  120px;
 }
html>body #left {
  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;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  120px;
 }
html>body right {
  120px; /* ie5win fudge ends */
 }

• 
  此主题相关图片如下：
  单行三列2：左列定位在左上，右列定位在右上，中间列浮在左列右面。左列和右列固定宽度，中间列自适应页面。

#left {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  120px;
 }
html>body #left {
  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;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  120px;
 }
html>body #right {
  120px; /* ie5win fudge ends */
 }

• 
  此主题相关图片如下：
  单行三列3：三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应。

#left {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  120px;
 }
html>body #left {
  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;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  120px;
 }
html>body #right {
  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;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  120px;
 }
html>body #left {
  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;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  120px;
 }
html>body #right {
  120px; /* ie5win fudge ends */
 }

• 
  此主题相关图片如下：
  单行三列5：左右列绝对定位，中间列自适应。宽度满屏。

#left {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 0px;
 padding: 10px;
 border: 0px;
 background: #FFF;
  190px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  170px;
 }
html>body #left {
  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;
  190px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  170px;
 }
html>body #right {
  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;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  120px;
 }
html>body #left {
  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;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  120px;
 }
html>body #right {
  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;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  130px;
 }
html>body #left {
  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;
  150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
  130px;
 }
html>body #right {
  130px; /* ie5win fudge ends */
 }