一行两列

一行两列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 */
 }

下载全部样式