我想知道如何创建一个响应方块的布局.每个正方形都有垂直和水平对齐的内容.具体示例如下所示......

我在twitterBootstrap基本响应式设计网站上实现了GoogleMapsV3地图.
但我的问题很简单:我有:
<div id="map"></map>
Run Code Online (Sandbox Code Playgroud)
和
#map{ width: 100%; height: 200px }
Run Code Online (Sandbox Code Playgroud)
我希望能够将高度更改为外形.就像在这个"在我的梦中CSS"
#map { width: 100%; height: width * 1.72 }
Run Code Online (Sandbox Code Playgroud)
我试图将高度,设置为自动以及各种各样的因素留下来 - 但只是为了让div永远崩溃.
我编写js-solution没有问题,但希望有一个简单的清理CSS解决方案,可能是CSS3
如果不可能,那将是什么最好的方式来解决这个问题?(计时器,事件......等)