margin负值布局（一）

搜索关键词：margin 负-100%

链接地址：

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

秒客网

margin负值布局（一）

相关文章