0

これは2012年には簡単になるはずです:P

私がする必要があるのは、2 つの div を並べて配置することです。左のものにはテーブルが含まれています。右側にはグーグルマップが含まれています。

左の div は、テーブルの幅に合わせて必要なだけ拡張する必要があります (したがって、「固定幅」の列ですが、幅は指定されていません)。ブラウザーのサイズが変更された場合、テーブルは同じ数のピクセルを占めるため、固定幅です。テーブルは任意のサイズになる可能性があるため、幅を指定する必要はありません。

右側の div が残りのスペースを占有する必要があります。

誰でもこれを行う方法を知っていますか? Googleでこれを検索する方法さえ知りません。私がネット上で見るすべての「固定/流動」レイアウトには、固定列の幅が指定されています。

4

2 に答える 2

2

これを試してみてください：

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_CSSJSFIDDLE_WITH_JAVASCRIPT _

于 2012-12-22T16:44:37.833 に答える
0

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>
于 2012-12-22T16:10:06.813 に答える