以下是引用片段: <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> |
CSS: 以下是引用片段: #wrap{ width:100%; height:auto;} #column{ float:left; width:60%;} #column1{ float:left; width:30%;} #column2{ float:right; width:30%;} #column3{ float:right; width:40%;} .clear{ clear:both;} |
float定位二 xhtml: 以下是引用片段: <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> |
CSS: 以下是引用片段: body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;} .column {position: relative;float: left;} #center {width: 100%;} #left {width: 180px; right: 240px;margin-left: -100%;} #right {width: 130px;margin-right: -100%;} |
|