左边自适应,右边固定布局

今天来看一下左边自适应右边固定的布局,这个和左边固定右边自适应的布局是差不多的,只是换换方向罢了。

首先看下结构,这个跟左边固定右边自适应的布局的结构是一样的:

<div class="content">
<div class="sidebar">
右边固定部分
</div>
<div class="main">
左边自适应部分
</div>
</div>

下面就是想办法让sidebar在右边,main在左边,因为main是不定宽的,所以不建议让它浮动,那么我们就让sidebar浮动,给sidebar加一个float: right;此时会发现sidebar已经到右边了,并且和main重合了。

那么下一步就是给main加一个margin-right,使其右边sidebar的位置空出来。

CSS代码如下:

* {
margin: 0;
padding: 0;
}

.content {
margin: 0 auto;
width: 100%;
/*max-width: 1000px;*/
overflow: hidden;
}

.content .sidebar {
float: right;
width: 200px;
background-color: #f80;
}

.content .main {
margin-right: 230px;
background-color: #f80;
}

下面是示例及源码:

在线演示

查看源码