jquery - 使用 jQuery Mobile 网格时仅连续显示单个图像

Question

1. 我需要连续两张图片，但我每行只得到一张。
2. 谁能帮我设置图片说明？

这是我的 fiddle

HTML

<div class="grid-row" class="ui-grid-a">
  <a href="goTohomePage()" id="other-color" onClick='#'>
    <img src="img/new_application.png" height="100px" width="50px"/>
  </a>
</div>

<div class="grid-row"> 
  <a href="goToInprogressPage()" id="other-color" onClick='#'>
    <img src="img/new_application.png" height="100px" width="50px"/>
  </a>
</div>

<div class="grid-row" class="ui-grid-a">
  <a href="goTocompletedPage()" id="other-color" onClick='#'>
    <img src="img/new_application.png" height="100px" width="50px"/>
  </a>
</div>

<div class="grid-row">
  <a href="#" id="other-color" onClick='#'>
    <img src="img/new_application.png" height="100px" width="50px"/>
  </a>
</div>

CSS

.grid-container {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.grid-row img {
  max-width: 25% !important;
  width: 25% !important;
  padding: 30px;
} 

Answer 1

您可以使用 jQuery Mobile GRID 类来执行此操作 (http://demos.jquerymobile.com/1.4.3/grids/)

<div class="ui-grid-a grid-container">
    <div class="ui-block-a grid-row">
         <a href="goTohomePage()" id="other-color" onClick='#'><img src="http://lorempixel.com/80/80/food/1/" /></a>
    </div>
    <div class="ui-block-b grid-row">
         <a href="goTohomePage()" id="other-color" onClick='#'><img src="http://lorempixel.com/80/80/food/2/" /></a>
    </div>    
    <div class="ui-block-a grid-row">
         <a href="goTohomePage()" id="other-color" onClick='#'><img src="http://lorempixel.com/80/80/food/3/" /></a>
    </div>
    <div class="ui-block-b grid-row">
         <a href="goTohomePage()" id="other-color" onClick='#'><img src="http://lorempixel.com/80/80/food/4/" /></a>
    </div>
</div>

ui-grid-a 类有 2 列。第 1 列 div 具有类 ui-block-a，第 2 列具有 ui-block-b。然后为了很好地调整图像大小，将您的 CSS 设置为

.grid-row img{
    max-width: 100% !important;
    width: 100% !important;
    padding: 30px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;   
    box-sizing: border-box; 
}

Here is your updated FIDDLE