NEC定宽自适应布局

NEC是什么？
NEC是Nice Easy Css的简称，是网易（杭州）前端CSS开源项目代号，她为您提供漂亮简单的样式解决方案。

她包括了规范、框架、代码库、插件等内容，致力于为前端开发人员提供高效率高质量的前端页面开发解决方案，提高多人协作效率，也为非专业人员提供快速制作网页的解决方案。

• 读规范，让你的代码更具智慧和美丽的方法
• 用框架，选择一份合适的HTML和CSS基础代码
• 找代码，在这里找到她，或给你启发，或她就是你的
• 装插件，帮助你快速有效的使用代码库

今天特地学习了NEC自适应相关的布局，下面是主要的使用示例。

两列左侧定款，右侧自适应布局

<div class="g-bd1 f-cb">
    <div class="g-sd1">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn1">
        <div class="g-mn1c">
            <p>右侧自适应</p>
        </div>
    </div>
</div>
<style>
    .g-bd1{margin:0 0 10px;}
    .g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
    .g-mn1{float:right;width:100%;}
    .g-mn1c{margin-left:200px;}
    p{height: 150px;padding: 10px;color: #fff;background: orange;}
</style>

其中左侧定宽，设置相对定位，左浮动脱离文档流，右移定宽的负值；

右侧设为右浮动，宽为100%，右侧margin-left设为左侧定宽+隔开距离；

注意：这里负边距如果低于左侧宽度，将会无法满足右侧100%宽度要求，需要自己动手实验哈。

两列右侧定宽，左侧自适应布局

<div class="zell-dm2 g-bd2 f-cb">
    <div class="g-mn2">
        <div class="g-mn2c">
            <p>
                我是左侧
            </p>
        </div>
    </div>
    <div class="g-sd2">
        <p>
            我是右侧
        </p>
    </div>
</div>
<style>
.g-sd2{float: right;position: relative;width:240px;margin-left:-240px;}
.g-mn2 {float: left;width:100%;}
.g-mn2c {margin-right: 280px;}
.zell-dm2 p{background: pink;height:300px;padding:5px;}
</style>

和上一个思路相同。

三列左侧自适应布局

<div id="demo">
    <div class="g-bd4 f-cb">
        <div class="g-sd41">
            <p>右侧定宽1</p>
        </div>
        <div class="g-sd42">
            <p>右侧定宽2</p>
        </div>
        <div class="g-mn4">
            <div class="g-mn4c">
                <p>左侧自适应</p>
            </div>
        </div>
    </div>
</div>

<style>
    #demo{
        width:980px;margin:auto;
        margin-top: 45px;
    }
    .g-bd4{
        border:1px solid black;
    }
    .g-sd41,.g-sd42{
        position: relative;float: right;width:230px;
    }
    .g-sd42{
        width:190px;margin-right: 10px;
    }
    .g-mn4{
        float: left;width:100%;margin-right: -430px;
    }
    .g-mn4c{
        margin-right:440px;
    }
    .g-bd4 p{
        padding:5px;background-color: orange;
        height:140px;
    }
</style>

原理依然使用负边距消除溢出。

三列左侧右侧定宽，中间自适应

<div class="g-bd5 f-cb">
    <div class="g-sd51">
        <p>
            左侧定宽
        </p>
    </div>
    <div class="g-mn5">
        <div class="g-mn5c">
            <p>
                中间自适应
            </p>
        </div>
    </div>
    <div class="g-sd52">
        <p>
            右侧定宽
        </p>
    </div>
</div>
<style>
    .g-bd5 {
        margin: 45px 0 0 0;
    }
    .g-sd51,.g-sd52{
        position: relative;width:240px;
        margin: 0 -240px 0 0;
        float: left;
    }
    .g-sd52{
        float: right;
        margin:0 0 0 -240px;
    }
    .g-mn5 {
        float: left;
        width:100%;
    }
    .g-mn5c{
        margin:0 250px 0 250px;
    }
    .g-bd5 p{
        height:120px;
        background-color:pink;
        padding:5px;
    }
</style>