css 左右列固定宽，中间列自适应，第三列显示异常

小D2013 2013-09-15 10:42:12

如下：第三列显示在新起的一行的右边，这是怎么回事啊

<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>

...全文

251 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

fzfei2 2013-09-16

打赏
举报

中间列80%自适应,


<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>

xuzuning 2013-09-16

打赏
举报

<div id="header" style="width:100%; height:26px;">
 <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>

把中间的（没有 float 属性的）调到下面即可建议你认真体会一下关于html文本流的描述

_MyPrecious 2013-09-16

打赏
举报

可以把中间和右换个位置这样就可以了或者改布局方式，定位啦双飞翼布局啦，都是可行的

_MyPrecious 2013-09-16

打赏
举报

按你的写法，第三列另起一行是正常显示效果左浮动中间不浮动，所以第三列不会上去会以中间的div下方左右浮动

小D2013 2013-09-16

打赏
举报

效果不对，你可以自己试试，

小D2013 2013-09-15

打赏
举报

我需要中间列自适应

fzfei2 2013-09-15

打赏
举报

header 加上 float：left后, 不能100%,设置固定宽度

小D2013 2013-09-15

打赏
举报

还是不行，中间的header 加上 float：left,之后，只显示中间ss两个字符的长度，我又给他设置了width：100%,显示还是不行，第一列显示在第一行，第二列显示在第二行，第三列显示在第三行

fzfei2 2013-09-15

打赏
举报

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>