需要幫助構建頁面

Question

我失敗的嘗試是在 http://jsfiddle.net/NZtc4/

我試圖制作一個無論頁面大小如何都顯示以下頁面的Web應用程序頁面。

[Toolbar]
[ Image ]
[img][img][img] <-此行應可滾動<->（可拖動）

• 工具欄是jquery的移動工具。
• 圖像應為剩余高度的67％，寬度為100％。
• imgs應為頁面寬度的50％，並為剩余高度。 （在任何給定時間都顯示了兩個等效的完整圖像。）
• 任意數量的imgs> 2。
  （所有圖像都是錨點，但這超出了問題的范圍。）

頁面應該是無縫的； 即元素之間沒有間隙。

答案是所描述頁面的實現的演示或說明。

Answer 1

如果您的元素為inline-block則HTML換行符中的空格將被解釋​​為空格。 為了消除這種差距，您需要添加font-size:0 。 副作用是，這要求您為實際包含文本的元素提供字體大小。 （否則，它們將不會顯示任何文本）。 在CSS3中，您可以使用font-size:1rem將font-size設置為body（根）之一。

對於底部滾動條，您無需指定width ，而是需要white-space:nowrap以便您的元素出現在同一行中。

參見編輯示例： http : //jsfiddle.net/NZtc4/2/