div+css布局总结

作者：zccst



3，position布局
#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)


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

2015-05-04更新

<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%的时候，右侧的元素已经从下一行回到当前行了
参考文档：http://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width

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

1，float布局

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

如果您觉得本文的内容对您的学习有所帮助，您可以微信：