CSS 常見布局 之 左側自適應，右側固定 3種方式，css自適應

CSS 常見布局 之 左側自適應，右側固定 3種方式，css自適應
第一種：左側用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>