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

Question

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

右侧 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);

在此处的 fiddle 中尝试一下:http://jsfiddle.net/ZbzL5/