你的位置:首页 > 网页设计

[网页设计]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>