CSS三栏布局两侧定宽中间自适应-双翼布局

代码结构：

中间部分设置左浮动，并设置宽度为100%；.center {    float:left;    width:100%;     background-color: #996600; }

设置左右两侧固定宽度为300px,并向左浮动.left,.right {    float:left;    width: 300px;     height: 300px; }

左侧设置左外边距为-100%；.left {    margin-left: -100%;    background-color: #FF9966;}

右侧设置左外边距为负的右侧的宽度；.right {    margin-left:-300px;    background-color: #CCCC00;}

查看效果如下图可以看到中间部分的文字信息并没有显示全，这是因为部分内容被左侧覆盖了，但这并不是我们想要的。

为了解决上述问题，我们需要将中间部分的内容再添加一个包裹层，并且设置它的左右外边距分别为左右两侧的宽度（样式暂时写在行内了）。

查看效果这回文字都显示全了，修改窗口大小也正常显示

全部代码：