jQuery Mobile;是否可能在ui-grid块之间没有填充/空格？

Question

我正在尝试并排放置三张图片，以便根据所使用的浏览器（特别是移动设备）的大小进行缩放。我尝试使用“ui-block-b”，但是这个解决方案使得在移动设备上查看页面时图像非常小而且相距很远。理想情况下，图片之间没有空格，并且会跨越浏览器屏幕的整个宽度。

现在的样子：

代码：

        <div class="ui-grid-b">
        <div class="ui-block-a">
            <div class="ui-bar"> <a href="xxx.htm">
            <img src="http://lorempixel.com/200/150/abstract/1" />
            </a>

            </div>
        </div>
        <div class="ui-block-b">
            <div class="ui-bar"> <a href="xxx.htm">
            <img src="http://lorempixel.com/200/150/abstract/1" />
            </a>

            </div>
        </div>
        <div class="ui-block-c">
            <div class="ui-bar"> <a href="xxx.htm">
            <img src="http://lorempixel.com/200/150/abstract/1" />
            </a>

        </div>
     </div>

此外，任何使用它们之间的滑动功能对这些图像进行灯箱装饰的帮助都将受到赞赏！

Answer 1

  

<强> DEMO

在.ui-bar和锚标记上设置一个小填充，这样网格单元格之间的空间就会减少。然后给图像max-width设置为100％，这样在较小的屏幕上它们将缩小：

.ui-bar {
    padding: 2px;;
}
.ui-block-a a, .ui-block-b a, .ui-block-c a {
    padding: 6px;;
}
.ui-block-a img, .ui-block-b img, .ui-block-c img {
    max-width: 100%;
}