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>