<p>单行一列<br />
以下是引用片段：<br />
body { margin: 0px; padding: 0px; text-align: center; }<br />
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }<br />
两行一列<br />
以下是引用片段：<br />
body { margin: 0px; padding: 0px; text-align: center;}<br />
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}<br />
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}<br />
三行一列<br />
以下是引用片段：<br />
body { margin: 0px; padding: 0px; text-align: center; }<br />
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }<br />
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }<br />
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }<br />
单行两列<br />
以下是引用片段：<br />
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }<br />
#bodycenter #dv1 {float: left;width: 280px;}<br />
#bodycenter #dv2 {float: right;width: 410px;}<br />
两行两列<br />
以下是引用片段：<br />
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}<br />
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }</p>
<p>#bodycenter #dv1 { float: left; width: 280px;}<br />
#bodycenter #dv2 { float: right;width: 410px;}<br />
三行两列<br />
以下是引用片段：<br />
#header{ width: 700px;margin-right: auto; margin-left: auto; }<br />
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }<br />
#bodycenter #dv1 { float: left;width: 280px;}<br />
#bodycenter #dv2 { float: right; width: 410px;}<br />
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }<br />
单行三列<br />
绝对定位<br />
以下是引用片段：<br />
#left { position: absolute; top: 0px; left: 0px; width: 120px; } <br />
#middle {margin: 20px 190px 20px 190px; }<br />
#right {position: absolute;top: 0px; right: 0px; width: 120px;}<br />
float定位一<br />
xhtml:<br />
以下是引用片段：<br />
<div id="warp"> <div id="column"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列</div> <div class="clear"></div> </div> <div id="column3">这里是第三列</div> <div class="clear"></div> </div><br />
CSS:<br />
以下是引用片段：<br />
#wrap{ width:100%; height:auto;}<br />
#column{ float:left; width:60%;}<br />
#column1{ float:left; width:30%;}<br />
#column2{ float:right; width:30%;}<br />
#column3{ float:right; width:40%;}<br />
.clear{ clear:both;}<br />
float定位二<br />
xhtml:<br />
以下是引用片段：<div id="center" class="column"> <h1>This is the main content.</h1> </div> <div id="left" class="column"> <h2>This is the left sidebar.</h2> </div> <div id="right" class="column"> <h2>This is the right sidebar.</h2> </div><br />
CSS:<br />
以下是引用片段：<br />
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}<br />
.column {position: relative;float: left;}<br />
#center {width: 100%;}<br />
#left {width: 180px; right: 240px;margin-left: -100%;}<br />
#right {width: 130px;margin-right: -100%;}<br />
两行三列<br />
xhtml:以下是引用片段：<div id="header">这里是顶行</div> <div id="warp"> <div id="column"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列</div> <div class="clear"></div> </P> <P></div> <div id="column3">这里是第三列</div> <div class="clear"></div> </div><br />
CSS:<br />
以下是引用片段：<br />
#header{width:100%; height:auto;}<br />
#wrap{ width:100%; height:auto;}<br />
#column{ float:left; width:60%;}<br />
#column1{ float:left; width:30%;}<br />
#column2{ float:right; width:30%;}<br />
#column3{ float:right; width:40%;}<br />
.clear{ clear:both;}<br />
三行三列<br />
xhtml:<br />
以下是引用片段：<div id="header">这里是顶行</div> <div id="warp"> <div id="column"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列</div> <div class="clear"></div> </div> <div id="column3">这里是第三列</div> <div class="clear"></div> </div> <div id="footer">这里是底部一行</div><br />
CSS:<br />
以下是引用片段：<br />
#header{width:100%; height:auto;}<br />
#wrap{ width:100%; height:auto;}<br />
#column{ float:left; width:60%;}<br />
#column1{ float:left; width:30%;}<br />
#column2{ float:right; width:30%;}<br />
#column3{ float:right; width:40%;}<br />
.clear{ clear:both;}<br />
#footer{width:100%; height:auto;}</p>