CSS 两列布局 之 左侧适应,右侧固定 3种方式

第一种:左侧用margin-right,右侧float:right

CSS代码:

html,
body,ul,li
#wrapper {
width: 100%;
height: 100%;
padding:;
margin:;
} .left,
.right {
min-height: 500px;
border:;
} .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>

最终效果:

CSS 两列布局 之 左侧适应,右侧固定  3种方式

上一篇:【android】修改android默认应用图标


下一篇:Android --- px与dip换算