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> 

Кроме того, любая помощь с lightboxing этих изображений с функциональностью салфетки между ними будет оценен!

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%; 
}