css 左右列固定宽,中间列自适应,第三列显示异常
如下:第三列显示在新起的一行的右边,这是怎么回事啊
<div id="header" style="width:100%; height:26px;">
<div id="headerleft" style="float:left; background:url(images/main_01.gif); width:227px; height:26px;">ss</div>
<div id="header" style=" margin-left:227px; margin-right:60px; background:url(images/main_03.gif); height:26px;">ss</div>
<div id="headerright" style=" float: right; height:26px; width:60px; background:url(images/main_05.gif); ">aa</div>
</div>
[解决办法]
header 的样式里加上 float:left;
<div id="header" style="width:100%; height:26px;">
<div id="headerleft" style="float:left; background:url(images/main_01.gif); width:227px; height:26px;">ss</div>
<div id="header" style=" margin-left:227px;float:left; margin-right:60px; background:url(images/main_03.gif); height:26px;">ss</div>
<div id="headerright" style=" float: right; height:26px; width:60px; background:url(images/main_05.gif); ">aa</div>
</div>
<div id="header" style="width:100%; height:26px;position: relative;">
<div id="headerleft" style="position: absolute;left:0; background:url(images/main_01.gif); width:227px; height:26px;">ss</div>
<div id="header" style="width: 80%; margin:0 auto ; border:1px solid; background:url(images/main_03.gif); height:26px;">ss</div>
<div id="headerright" style=" position: absolute;right:0; top:0; height:26px; width:60px; background:url(images/main_05.gif); ">aa</div>
</div>
<div id="header" style="width:100%; height:26px;">把中间的(没有 float 属性的)调到下面即可
<div id="headerleft" style="float:left; background:url(images/main_01.gif); width:227px; height:26px;">漂浮在左边</div>
<div id="headerright" style=" float: right; height:26px; width:60px; background:url(images/main_05.gif); ">漂浮在右边</div>
<div id="header" style=" margin-left:227px; margin-right:60px; background:url(images/main_03.gif); height:26px;">正常的HTML文本流</div>
</div>