使用jQuery mobile grid时，一行中仅显示一个图像 我需要两个图像在一行，但我只有一个每行 有人能帮我设置图片标题吗

这是我的

HTML

---

您可以使用float。尝试更改CSS，如下所示

.grid-row img
{

    max-width: 45% !important;
    width: 45% !important;
    padding: 10px;
    float: left;
}

---

诀窍是浮动和大小的div，然后使图像适合它里面

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

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

请注意，如果拉伸可见窗口宽度，图像将拉伸。这是因为您正在用html固定高度（和宽度，但css正在覆盖）

完全移除宽度/高度：

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

其他一些代码清理的事情

• 在一个参数中分配多个类：

  …class=“网格行ui-grid-a”…

---

您可以使用jQuery移动网格类来执行此操作（）

这是您最新的

---

仍然是每行一张图片，你能帮我做一把小提琴吗？你使用了宽度：45%吗？是的，我仍然使用了它，我得到了相同的结果，但是图片宽度增加了，改变填充30px到10px或更少！我需要同样的。但是我需要为图片添加标题。每个图像的任何名称。我怎么能做到这一点呢！！非常感谢

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

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

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

<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>

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