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

这应该很容易在2012年：P“未指定的宽度固定”+流体布局

我需要做的是有2个div，并排。左边的包含一张桌子。正确的一个包含谷歌地图。

左div需要扩展尽可能多的以适应表的宽度（所以它是一个“固定宽度”列，但宽度不是我指定的）。它的宽度是固定的，因为如果浏览器被调整大小，表格会占用相同数量的像素。我不想指定宽度，因为表格可以是任意大小。

正确的div需要占用剩下的空间。

任何人都知道如何做到这一点？我甚至不知道如何在谷歌搜索这个。我在网上看到的每个“固定/流体”布局对于固定列具有指定宽度。

来源

2012-12-22 user275801

不可能用CSS：使用jQuery或Javascript –

P哇，吸:(可以”相信W3C还没有想出这一个呢？ – user275801

是的，我几天前看到一个类似的问题，需求是一样的！我问他我可以帮助Jquery但他不想用它！ –

约CSS什么：

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

来源

2012-12-22 16:10:06 ATOzTOA

以及他知道如何将它们并排添加....请阅读整个问题！ –

@AspiringAqib更新中... – ATOzTOA

@ATOzTOA什么是空表？ –

尝试

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

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

#myTable{ 
    width :"100px" 
}

HTML出这一点：

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

来源

2012-12-22 16:44:37 algorhythm

我注意到你正在设置gmap的宽度，但我想避免指定宽度gmap或table。Basicall Ÿ浏览器应该知道表的宽度，并且应该只将剩余的宽度分配给gmap。以你为例，gmap的宽度为150px，但我的显示器宽度为1920像素，表格宽度大约为150px。这意味着有很多空白。 – user275801

使它与JavaScript。计算像这样缺失的宽度：http://jsfiddle.net/gMfX4/ – algorhythm

感谢@algorhythm，将尝试jquery :)谢谢你的jQuery示例。 – user275801

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

回答

相关问题