需要帮助构建页面

Question

我的失败尝试在 http://jsfiddle.net/NZtc4/

我正在尝试制作一个显示以下页面的 Web 应用页面，无论屏幕大小如何。

[Toolbar]
[ Image ]
[img][img][img] （可拖动）

• 工具栏是 jquery mobile 的。
• 图片应为剩余高度的 67%，宽度为 100%。
• imgs 应该是页面宽度的 50% 并且是剩余高度。 （在任何给定时间显示两个等效的完整图像。）
• 任意数量的图像>2。
  （所有图像都将是锚点，但这超出了问题的范围。）

页面应该是无缝的；即元素之间没有间隙。

答案是对所描述页面实现的演示或解释。

Answer 1

如果您的元素是inline-block，则在您的 HTML 换行符中将被解释为空格。为了消除这个差距，您需要添加font-size:0。作为副作用，这需要您为实际包含文本的元素提供字体大小。 （否则他们不会显示任何文本）。在 CSS3 中，您可以使用 font-size:1rem 将字体大小设置为主体（根）之一。

对于底部滚动条，您无需指定width，而是需要white-space:nowrap，以便您的元素出现在同一行。

查看编辑示例：http://jsfiddle.net/NZtc4/2/