CSS 兩列布局 之 左側適應，右側固定 3種方式

第一種：左側用margin-right，右側float：right

CSS代碼：

html,
        body,ul,li
        #wrapper {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        
        .left,
        .right {
            min-height: 500px;
            border: 0;
        }
        
        .left {
            background-color: #999999;
            margin-right: 151px;
            
        }
        
        /*左適應右固定第一種*/
        .right {
            background-color: #808080;
            width: 150px;
            float: right;
        }
        
        .content {
            background-color: #CCCCCC;
            /*padding-right: 150px;*/
            /*width: 100%;*/
        }
        
        .content li{
            float: left;
            width: 150px;
        }

html代碼：

<div id="wrapper">
            <div class="right">
                右側菜單
            </div>
            <div class="left">
                <div class="content">
                    <ul>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                        <li>我是sad放假阿薩洛夫 </li>
                    </ul>
                </div>
            </div>

        </div>

 

第二種：左側一樣用margin-right 右側採用絕對定位

CSS代碼（只須要把第一種註釋部分替換便可）：

/*左適應右固定第一種*/
        /*.right {
            background-color: #808080;
            width: 150px;
            float: right;
        }*/
        
        /*左適應右固定第二種(把上面的替換爲改代碼便可)*/
        .right {
            background-color: #808080;
            width: 150px;
            position: absolute;
            top: 0px;
            right: 0px;
        }

第三種：左右都浮動 且 右側用負margin值

CSS代碼：

.wrap {
                overflow: hidden;
                background: #EEE;
            }
            
            .wrap-right {
                width: 300px;
                /*position: relative;*/
                float: right;
                margin-left: -300px;
                background: #AAA;
            }
            
            .wrap-left {
                width: 100%;
                float: left;
            }
            
            .left-con {
                margin-right: 300px;
                background: #DDD;
            }
            
            .left-con,
            .wrap-right {
                height: 300px;
            }

HTML代碼：

<div class="wrap">
            <div class="wrap-left">
                <div class="left-con">
                    我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc
                </div>
            </div>
            <div class="wrap-right">
                <a href="" target="_blank">我是mmmmmm</a>
            </div>
        </div>

 最終效果：