margin负值布局（一）

 

搜索关键词：margin  负-100%

 

链接地址：

负margin用法权威指南

负边距(negative margin)实现自适应的div左右排版

 

 

 

 

        <div class="cont">
            <div class="main">
                <div class="nav">nav
                </div>
                <div class="main-l">main-l
                </div>
                <div class="main-c">
                    <div class="main-c-wrap">main-c
                    </div>
                </div>
                <div class="main-r">main-r
                </div>
            </div>
        </div>

 

 

 

/*布局：main-l在先，main-c在后，所以同时float:left时，main-l是在上面的，main-c在第二行，因为main-c的width是100%
这样，main-l的margin-right等于-100%时，相当于是把第二行的main-c给重新回至第一行。
如果main-c里不包裹一个margin-left为main-l宽度的元素，则main-l和main-c的内容会重叠，仅此而已。

推而广之：与上面的margin-left对比发现：顺序非常重要，直接决定着到底是使用margin-left:-100%，还是margin-right:-100%;
如果width:100%的元素在先，那就使用margin-left:-100%，目的是将下一行（非100%的元素）的提至第一行的左侧;
如果width:100%的元素在后，那就使用margin-right:-100%，目的是讲下一行（100%的元素）提至第一行，并且左边空出位置，留给提它上来的元素;
*/
.cont .main-c { float:left; display: inline; width: 100%; /*background-color: #be1;*/}
.cont .main-c .main-c-wrap { margin: 0 300px; background-color: #ef1;}
.cont .main-l { float:left; display: inline; width: 300px; margin-right: -100%; background-color: #abc;}
/*再看margin-left:-300px，直观意思是要自己左移，与上一个元素重叠300像素，由于自身宽度是300px，则相当于把自己从第二行移至第一行
同理，如果上一行不包裹一个margin-right为main-r宽度的元素，则main-r和main-c的内容会重叠，仅此而已*/
.cont .main-r { float:left; display: inline; width: 300px; margin-left: -300px; background-color: #1fd;}