使用 jQuery 移动网格时仅连续显示单个图像答案

【问题标题】：only single image presented in a row when using jQuery mobile grid使用 jQuery 移动网格时仅连续显示单个图像
【发布时间】：2014-08-21 17:12:20
【问题描述】：

我需要连续的两张图片，但我每行只能获得一张。
谁能帮我设置图片标题？

这是我的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;
}

【问题讨论】：

标签： jquery css jquery-ui jquery-mobile

【解决方案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; 
}

这是您更新的FIDDLE

【讨论】：

我也需要。但我需要为图像添加标题。每个图像的任何名称。我该怎么做
太棒了！非常感谢

【解决方案2】：

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

.grid-row img
{

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

【讨论】：

每行仍然得到一张图像
你能帮我做一个小提琴吗？
你使用宽度：45% 吗？
是的，我仍然使用它，我得到相同的结果，但图像宽度增加了
将内边距 30px 更改为 10px 或更小！

【解决方案3】：

诀窍是浮动和调整 div 的大小，然后使图像适合其中...

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

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

Fiddle

请注意，如果您拉伸可见窗口的宽度，图像将被拉伸。这是因为您正在修复 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>

Fiddle

其他一些代码清理的东西...

在一个参数中分配多个类：...class="grid-row ui-grid-a"...

【讨论】：