如何調整左浮動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(){})