1

如何设置 2 个 htmldiv标签，一个向左浮动（实际上包含 Google 地球插件），一个向右浮动（最初隐藏）？

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

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

4

3 回答 3

0

基本上是为了让谷歌地球知道你需要改变 div 大小

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

参考：所以 g map resize 但是在你的场景中，你也可以使用 jquery 在右 div 的 resize 事件中触发上述。$('div').bind('resize', function(){})

于 2013-09-29T17:32:49.703 回答
0

只需使用一些 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/

于 2013-09-29T17:24:32.547 回答
0

这里有一个例子：

当新 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

于 2013-09-29T17:26:46.027 回答