css - "Unspecified width fixed"+ 流体布局

Question

这在 2012 年应该很容易 :P

我需要做的是并排放置 2 个 div。左侧包含一张表格。右侧包含一张谷歌地图。

左边的 div 需要扩展到它需要容纳表格的宽度(所以它是一个“固定宽度”的列，但宽度不是我指定的)。它是固定宽度的，因为如果调整浏览器的大小，表格会占用相同数量的像素。我不想指定宽度，因为表格可以是任何大小。

右边的 div 需要占用剩余的空间。

有人知道怎么做吗？我什至不知道如何在谷歌上搜索这个。我在网上看到的每个“固定/流动”布局都有一个固定列的指定宽度。

Answer 1

试试这个:

HTML 标记

<div id="container">
    <div class="gmap"></div>
    <div class="table"></div>
</div>​

使用 CSS

#container {
    position: relative;
}
.table, .gmap {
    position: absolute;
    top: 0;
    height: 300px;
}
.table {
    left: 0;
    right: 150px; /* width of gmap */
}
.gmap {
    right: 0;
    width: 150px;
}

或使用 jQuery

var containerWidth = jQuery('#container').innerWidth();
var tableWidth = jQuery('.table').outerWidth();

jQuery('.gmap').width(containerWidth -tableWidth);

的 JSFIDDLE_WITH_CSS JSFIDDLE_WITH_JAVASCRIPT