如何调整左浮动div以适应右浮动DIV？

Question

如何设置2个html div标签，其中一个浮动标签（实际上包含Google地球插件），一个浮动标签（最初隐藏）？

右分区的内容将动态填充许多不同的对话框，然后显示。一旦可见，其宽度可以进一步扩大。

我需要左边的div缩小以适应正确的div，当有权利的div从不可见到可见或每当它的宽度调整。

Answer 1

只需调整一些JavaScript的左边div的宽度？ 根据您的布局，您可以使用％或px或任何您喜欢的。

这里'山展示如何使用基于百分比的布局做非常简单的例子：

HTML

<div class="l">LEFT</div> 
<div clasS="r">RIGHT</div> 
<br> 
<a>TOGGLE R</a> 

JS

(function($) { 
    var visible = false; 

    $("a").click(function(event) { 
     event.preventDefault(); 

     $("div.r").toggle(); 
     $("div.l").css("width", 50+(visible*50)+"%"); 
     visible = !visible; 
    }); 

})(jQuery); 

尝试一下在小提琴在这里：http://jsfiddle.net/ZbzL5/

Answer 2

这里的一个例子：

你必须做一个事件，当新的div是可见的，并改变左div的宽度。

JS：

$(function(){ 
    $("button").click(function(){ 
     var precSize = $("#width_input").val(); 
     var parentWidth = $(".wrapper").width(); 
     var leftOldSize = $(".left").width(); 
     var newSize = parentWidth * ((100 - parseInt(precSize))/100); 
     $(".left").width(newSize); 
     $(".right").width($(".right").width() + (leftOldSize - newSize)); 
    }); 
}); 

jsFiddle

Answer 3

基本上使谷歌地球意识到DIV大小改变了你需要

google.maps.event.trigger(map, "resize"); 

参考：so g map resize 但在你scenarion你也可以触发上述权利事件的上述我们在jQuery中。 $('div').bind('resize', function(){})