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

 

网页布局-常见

 

 

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