Question

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

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

我需要左边的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 但是在你的场景中，你也可以使用jquery触发右边div的resize事件。 $('div').bind('resize', function(){})

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

3 个答案: