浮动后将浮动Div宽度调整为100%

时间:2014-11-06 07:09:04

标签: jquery html css

我尝试做这样的事情,当左下方隐藏右侧div浮动但我需要右边的div应该调整大小并在隐藏或显示后填充左侧潜水的空白区域。

<div class="main">
<!--heqd start-->
<div class="head">
    <div class="head_l">
    <!--logo -->
    <img src="master3_img/logo_m.png" alt="logo" />
    </div>

    <div class="head_r"></div>
<div style="clear:both"></div>
</div>
<!--head end-->

<!--body part start-->
<div class="body">
<!--body left-->
<div class="body_l">
<div id="slide"></div>
<div id="clicky" class="s_r">Click me</div>

   

<!--body right-->
<div class="body_r"></div>
<!--body right end-->

</div>
<!--body part end-->

    $(function(){ 

$("#clicky").click(function(){
    if($("#slide").is(':visible'))
  {
    $("#slide").animate({ width: 'hide' }); 
  }
  else
  {
    $("#slide").animate({ width: 'show' }); 

  }
});



});

My working Demo is here

1 个答案:

答案 0 :(得分:0)

尝试以下代码。希望这能解决你的问题。

<div class="body_r"></div>更改为<div id="body_r"></div>

$(function(){ 

  $("#clicky").click(function(){
    if($("#slide").is(':visible'))
      {
        $("#slide").animate({ width: 'hide' }); 
      }
    else
      {
        $("#slide").animate({ width: 'show' }); 
        $("#body_r").width('100%');       
      }
 });   
});