左边固定列，右边自适应布局；左右固定列，中间自适应布局

左边固定列，右边自适应布局；左右固定列，中间自适应布局

偶然看见论坛很多类似这样的问题，遂搜寻整理如下，以便参考

左边固定列，右边自适应布局

如图：

 

======================html==========================

<div class="box">
<div class="left">
我是左边内容我是左边内容我是左边内容我是左边内容我是左边内容我是左边内容我是左边内容我是左边内容122222
</div>
<div class="middle">
我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容
我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容
</div>
</div>

===================css===========================

.box{
width: 80%;
margin: 100px auto;
border: 1px #000 solid;
height: 100%;
}
.left{
float: left;
border: 1px red solid;
width: 200px;
}

.middle{
border: 1px blue dashed;
background: #dedede;
margin-left: 210px;
}

=========================================

左右固定列，中间自适应布局

如图

=================

 

=======================html=======================================

<div class="box">
<div class="left">
我是左边内容我是左边内容我是左边内容我是左边内容我是左边内容我是左边内容我是左边内容我是左边内容122222
</div>
<div class="right">
我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容我是右边内容
</div>
<div class="middle">
我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容
</div>
</div>

注意left,right,middle这个结构的顺序

========================================================

.box{
width: 80%;
margin: 100px auto;
border: 1px #000 solid;
height: 100%;
}
.left{
float: left;
border: 1px red solid;
width: 200px;
}
.right{
float: right;
width: 250px;
border: 1px #000 solid;
}
.middle{
border: 1px blue dashed;
background: #dedede;
margin-left: 210px;
margin-right: 260px;
}

===============================================

链接地址：

https://files.cnblogs.com/files/leshao/%E5%B7%A6%E5%8F%B3%E5%9B%BA%E5%AE%9A-%E4%B8%AD%E9%97%B4%E8%87%AA%E9%80%82%E5%BA%94.rar

https://files.cnblogs.com/files/leshao/%E5%B7%A6%E8%BE%B9%E5%9B%BA%E5%AE%9A%EF%BC%8C%E5%8F%B3%E8%BE%B9%E8%87%AA%E9%80%82%E5%BA%94.rar