單行單列1:采用float浮在左上角,固定寬度。
#content {float: left;padding: 10px;margin: px;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: px;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:固定在左上角,不固定寬度,采用百分比(%)定義寬度來自適應(yīng)頁面。
#content {position: absolute;top: 0px;left: 0px;margin: px;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;)實(shí)現(xiàn)適應(yīng)頁面自動(dòng)居中。
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: px;margin-bottom: px;margin-right: auto;margin-left: auto; /* opera does not like margin:px 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: px;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: px;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: px 1% px 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: px 2% px 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 */