div+css布局总结

作者：zccst


[b][size=large]3，position布局[/size][/b]
#wrap { position:relative; }//相当于父元素的左上角进行定位
#left { position:absolute; top:0px; left:0px; width:120px; }
#middle {margin:20px 190px 20px 190px; }
#right {position:absolute; top:0px; right:0px; width:120px;}

绝对定位布局：
设置居中效果
left:50%; margin-left:-(width/2)


[b][size=large]2，margin等于-100%布局[/size][/b]
有margin-left:-100%和margin-right:-100%两种情况，淘宝都有用。
使用margin-left的有：screen-hd .head 里面包括logo、搜索框和二维码。
使用margin-right的有：screen-hd .cont 里面包括导航菜单右侧的部分。

2015-05-04更新
[img]http://dl2.iteye.com/upload/attachment/0108/3090/04f4c94b-710c-35d0-bb06-d993946de116.png[/img]

<div class="container">
    <div class="left">关键词:</div>
    <div class="right">
        <ul>
            <li><a href="###">五一节</a></li>
            <li><a href="###">国庆节</a></li>
            <li><a href="###">春节</a></li>
            <li><a href="###">春节</a></li>
            <li><a href="###">春节</a></li>
            <li><a href="###">春节</a></li>
        </ul>
    </div>
</div>

.container .left{float:left;margin-left:30px;margin-right:-100%;line-height:28px;color:#333;font-size:16px;}
.container .right{float:left;width:100%;}
.container ul{margin:0;padding:0;list-style:none;overflow:hidden;margin-left:26%;width:70%;}

批注：margin-right的含义是什么？是右边元素跟自己的距离。
如果大于0表示，将右边元素往右挤
如果等于0表示挨着，
如果小于0表示，将右边元素向左移动，-100%表示，回到该元素的最左边。
由于本例中，自身(关键词:）的宽度是屏幕宽度的-23%，所以当margin-right:-23%的时候，右侧的元素已经从下一行回到当前行了
参考文档：[url]http://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width[/url]

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

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

我自己实现的例子：

<div class="wrap">
	<div class="l">lllllll</div>
	<div class="c"><div class="c-wrap">cccccccccccccccccc</div></div>
	<div class="r">r</div>
</div>
<style>
.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;}
</style>

[size=large][b]1，float布局[/b][/size]

<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>
<style>
#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;}
</style>

如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]