常见div+css网页布局，float,absolute

网页布局-常见

1， float布局

（1）常规方法

<div >

<div >

<div >这里是第一列</div>

<div >这里是第二列</div>

<div class="clear"></div>

</div>

<div >这里是第三列</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 class="column">

<h1>This is the main content.</h1>

</div>

<div >

<h2>This is the left sidebar.</h2>

</div>

<div >

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