jquery - 需要帮助构建页面

标签 jquery html css jquery-ui jquery-mobile

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

我正在尝试制作一个显示以下页面的网络应用程序页面,无论屏幕大小如何。

[工具栏]
[图片]
[img][img][img] <-- 该行应该是可滚动的 <-> (可拖动的)

  • 工具栏是 jquery 移动工具栏。
  • 图片应为剩余高度的 67% 和宽度的 100%。
  • img 应占页面宽度的 50%,并为剩余高度。 (在任何给定时间显示两张等效的完整图像。)
  • 任意数量的 img >2。
    (所有图片都会是anchors,但这超出了问题的范围。)

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

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

最佳答案

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

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

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

关于jquery - 需要帮助构建页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10656609/

相关文章:

css - 如何强制应用程序占用移动设备(jqueryMobile)上的所有显示空间?

html - CSS/HTML - 使文本环绕图像

html - 学习编码时我必须花时间吗?

javascript - 使用for循环求和

javascript - 传单.js : Allow default drag/zoom options with HTML elements on top of map DIV

css - 以编程方式更改 Chrome 中标题和地址栏的字体类型

html - 用斜线分隔 2 个 div

javascript - 无法点击下拉菜单中的菜单链接

javascript - 动态绑定(bind)挖空图片源

javascript - 如何像w3school一样制作固定的导航栏顶部