javascript - 在小 div 中加载更多图 block

Question

我正在尝试实现 foursquare 用他们的 UI 所做的事情! 向左偏移 map 中心 https://foursquare.com/ .
我发现了他们是如何完成一部分但无法实现第二部分的。
第一部分是将 map 加载到一个小 div(将包含标记的那个)中，然后使用 overflow:visible，其他图 block 将填充具有 宽度的父 div: 100%。
我现在遇到的问题是，当我执行 overflow:visible 时，只显示了很少的图 block 。
我的问题是:如何在小 div 中加载更多图 block ？
下图解释了瓷砖如何不填满整个容器 谢谢。

编辑

这是 foursquare 主页上显示的完整 map ，称为提示 map 。 但是 这张 map 显示只是因为容器有一个overflow:visible。 如果隐藏了溢出，您将拥有:

因为div大小只有600px。

Answer 1

实际上有一篇关于 Mapbox 的 Young Hahn A List Apart 主题的非常酷的教程/文章，您可以在这里阅读:http://alistapart.com/article/hack-your-maps您可以在此处查看最终结果:https://www.mapbox.com/tutorial-sherlock/他正在使用 Mapbox，但这与使用 Leaflet 几乎相同(Mapbox 是 Leaflet 的扩展)，所以在那里所做的一切也适用于 Leaflet。它在 map 元素周围使用包装器以及相对和绝对定位:

#pane {
    position:fixed;
    top:0px;
    bottom:0px;
    right:0px;
    width:66.6666%;
}
#map  {
    position:absolute;
    top:0px;
    bottom:0px;
    width:200%;
    left:-50%;
}

这是一个在 Plunker 上使用 Leaflet 的小测试用例:http://plnkr.co/edit/vkTvRi?p=preview