Javascript 如何调整左浮动div的大小以适应右浮动div？

我如何设置2个html div标签，一个左浮动实际上包含Google Earth插件，一个右浮动最初隐藏

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

---

当右div从不可见切换到可见或其宽度调整时，我需要左div收缩以适应右div。

用一些javascript调整左div的宽度？ 根据您的布局，您可以使用%或px或任何您喜欢的

下面是一个非常简单的示例，展示了如何使用基于百分比的布局：

HTML

在小提琴中试一试：

这里有一个例子：

您必须在新div可见时创建一个事件，并更改左div的宽度

JS:

---

基本上是为了让google earth知道您需要更改div大小

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

参考：

---

但是在您的场景中，您也可以使用jquery在右div的resize事件中触发上述命令。$'div'.bind'resize'，函数{}

您能提供一个代码说明您到目前为止所做的工作吗？

(function($) {
    var visible = false;

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

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

})(jQuery);

$(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));
    });
});

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