3个DIV，中间的如何自适应宽度？

xhslyf 2009-08-02 09:24:27

<div id="left"> </div><div id="center"> </div><div id="right"> </div>



#left { width:35px; float:left; }

#center { float:left; }

#right { width:35px; }

左右两侧的div宽度为35px，中间的自适应宽度，也就是无论用户屏幕分辨率如何，左右各35px去掉以后，中间的div填充剩下的像素。
如何写CSS呢？

...全文

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

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

xhslyf 2009-08-04

打赏
举报

<div id="left"> </div><div id="center"> </div><div id="right"> </div>

#left { margin:0px -35px 0px 0px; width:35px; float:left; }
#center { margin:0px auto 0px; float:left; }
#right { margin:0px 0px -35px 0px; width:35px; }

这样就可以了，在网上搜索到的方法。也谢谢大家！

toury 2009-08-02

打赏
举报



<style>

  body   {margin:0px; padding:0px;}

  #left { width:35px; float:left; height:100px; background:#ccccce;} 

  #center { float:left;  background:#cff;} 

  #right { width:35px;height:100px; background:#ccccce; float:right;}

</style>

<script type="text/javascript"> 

function $(id){

  return document.getElementById(id)

}

window.onload=function(){

  var cW=document.compatMode=="CSS1Compat"?document.documentElement.clientWidth:document.body.clientWidth;//alert(cW)

  var lW=$("left").offsetWidth;

  var rW=$("right").offsetWidth;

  $("center").style.width=(cW-lW-rW)+"px";

}



</script>



<div id="left"> </div><div id="center"> </div><div id="right"> </div>