【RWD】議題(1)選單要怎麼做啊？左固定，右自適應

左固定，右自適應

• wrap用max-width
• 左邊的menu用Float
• 右邊的內容就用margin-left推

 <div class="wrap">

        <div class="menu">
            <ul>
                <li>電腦</li>
                <li>書本</li>
                <li>食物</li>
            </ul>
        </div>
        <div class="content">....一堆內容</div>
    </div>

.wrap {
    max-width: 980px;
    margin: 0 auto;
}

.menu {
    width: 200px;  //可以寫死
    float: left;    //浮動
    border: 1px solid #000;
}

.content {
    padding: 10px;
    margin-left: 200px;  //往右推200px，然後寬度隨父元素自適應
    background-color: orange;
}

​

選單至上

@media(max-width:780px) {
    .menu {
        float: none;    //清除浮動
        width: 100%;   //讓選單變成100%
    }
}

@media(max-width:780px) {
    .content {
        margin-left: 0px;  //清除右推
    }
}

​