css - “未指定宽度固定”+流体布局

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

Answer 2

CSS怎么样：

#firstTable{
    display:inline;
    width:auto;
}

#secondTable{
    display:inline;
    width:auto;
}

#myTable{
    width :"100px"
}

HTML

<div id="firstTable"><table id="myTable"><tr><td>Hello World!</td></tr></table></div>
<div id="secondTable"><div id="myMap"></div></div>