网页布局-常见

1，           float布局

（1）常规方法

<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;}

（2）margin等于-100%布局

有margin-left:-100%和margin-right:-100%两种情况，淘宝都有用。

使用margin-left的有：screen-hd .head 里面包括logo、搜索框和二维码。

使用margin-right的有：screen-hd .cont 里面包括导航菜单右侧的部分。

<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%;}

我自己实现的例子：

<div class="wrap">

<div
class="l">lllllll</div>

<div
class="c"><div
class="c-wrap">cccccccccccccccccc</div></div>

<div
class="r">r</div>

</div>

.wrap{width: 600px; height: 300px;
background: #eee;}

.l{display:inline;float:left; width:180px;
background:red; margin-right:-100%;}

.c{display:inline; float:left; width:100%;
overflow:hidden;}

.c .c-wrap{margin: 0 180px 0 180px;
background:blue; }

.r{display:inline;float:left;width:180px; background:yellow;
margin-left:-180px;}

2，          
position布局

#left { position:absolute; top:0px; left:0px; width:120px; }
#middle {margin:20px 190px 20px 190px; }
#right {position:absolute; top:0px; right:0px; width:120px;}