两栏布局、左边定宽200px、右边自适应如何实现?

一、两栏布局（左定宽，右自动）
1. float + margin

即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。

举例：

HTML代码：

<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>

CSS代码
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}

二、position + margin

即在父标签设置position属性为relative；子标签中定宽元素设置position属性为absolute；自适应元素设置margin属性，margin-left>=定宽元素宽度。

举例：

HTML代码

<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>

CSS代码

html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
position: relative;
}
.wrap_left{
position: absolute;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}
3.float + 负margin

即给自适应宽度元素定义一个父标签，并设置float属性为left；width为100%；自适应宽度元素设置margin，margin-left应>=定宽元素宽度；

固定宽度元素设置margin-left属性为负值：-100%；

除此之外应注意HTML结构中应先写自适应元素，再写固定宽度元素。

举例：

HTML代码

<div class="wrap">
<div class="wrap_right">
我是右栏
</div>
</div>
<div class="wrap_left">
我是左栏
</div>
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;
width: 100%;
}
.wrap .wrap_right{
margin-left: 220px;
background-color: green;
}
.wrap_left{
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
}
注：使用的float属性，必要时清除一下浮动。

二、三栏布局

掌握了上面的方法，我们会发现制作一个三栏布局也是非常容易的。

下面我们在上面栗子的基础上，看看实现一个两侧定宽，中间自适应的三栏布局如何实现

1. float + margin（两侧定宽，中间自适应）

HTML代码：

<div class="wrap_left">

我是左栏

</div>

<div class="wrap_right">

我是右栏

</div>

<div class="wrap_content">

我是中间栏

</div>

html,body,div{

margin: 0;

padding: 0;

}

.wrap_left{

width: 200px;

float: left;

background-color: red;

clear: both;

}

.wrap_content{

margin-left: 220px;

margin-right: 220px;

background-color: yellow;

}

.wrap_right{

width: 200px;

float: right;

background-color: green;

}

2. position + margin（两侧定宽，中间自适应）

HTML代码：

我是左栏

</div>

<div class="wrap_right">

我是右栏

</div>

<div class="wrap_content">

我是中间栏

</div>

css代码

html,body,div{

margin: 0;

padding: 0;

}

.wrap_left{

width: 200px;

position: absolute;

background-color: red;

left: 0;

}

.wrap_content{

margin-left: 220px;

margin-right: 220px;

background-color: yellow;

}

.wrap_right{

width: 200px;

position: absolute;

right: 0;

background-color: green;

}

3.float + 负margin（两侧定宽，中间自适应）

HTML代码

<div class="wrap">

<div class="wrap_content">

我是中间栏

</div>

</div>

<div class="wrap_left">

我是左栏

</div>

<div class="wrap_right">

我是右栏

</div>

CSS代码

html,body,div{

margin: 0;

padding: 0;

}

.wrap{

float: left;;

width: 100%;

}

.wrap_left{

width: 200px;

float: left;

margin-left: -100%;

background-color: red;

}

.wrap_content{

margin-left: 220px;

margin-right: 220px;

background-color: yellow;

}

.wrap_right{

width: 200px;

float: left;

margin-left: -200px;

background-color: green;

}

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com