最近学到了几种关于左右固定宽度，中间自适应的三列布局的方法，整理了一下，在这里跟大家一起分享分享，其中有什么不足的还望各位给指导指导哈。首先我想到的是float——浮动布局使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素 ...
最近学到了几种关于左右固定宽度，中间自适应的三列布局的方法，整理了一下，在这里跟大家一起分享分享，其中有什么不足的还望各位给指导指导哈。
首先我想到的是float——浮动布局
使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div style="width:300px; float:left; background:#6FF">左侧的内容 固定宽度</div> <div style="width:200px; float:right; background-color:#960">右侧的内容 固定宽度</div> <div style="margin-left:300px;margin-right:200px; background-color:#9F3;">中间内容，自适应宽度</div></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：CSS三列布局之左右宽度固定，中间元素自适应问题
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
