Question

我需要删除图片下方的空白，如下所示：http://www.sugarkandy.com/category/electronics/

我正在使用Wordpress并且已经使用styles.css辛苦工作但没有成功。玩过各种图像尺寸，类型等 - 但可以删除这个空白区域。图像使用图块，图块部分的css代码为：

    /* Homepage Tiles
    ----------------------------------------------- */

    /**
    * Grid container
    */
   #tiles {
    list-style-type: none;
    position: relative; /** Needed to ensure items are laid out relative to this         container **/
    margin: 0;
          }

/**
 * Grid items
 */
   #tiles li {
    width: 220px;
    background-color: #ffffff;
    border: 1px solid #dedede;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    display: none; /** Hide items initially to avoid a flicker effect **/
    cursor: pointer;
    padding: 4px;
             }

   #tiles li img {
    display: block;
                 }

我不是非常关注HTML并且花了很多时间试图找到解决方案但没有成功。

此外，当前点击图像标题时会打开彩色框弹出 - 是否可以通过单击图像上的任意位置打开弹出窗口？就像使用Wordpress的主题部分一样（在更改，激活或停用主题时）。

非常感谢您的帮助。

谢谢， SAURABH

Answer 1

据我所知，你的div容器里面似乎有一个空的p标签，它有一个“view view-first”类。然后你的style.css中有一类.view p，它有一个填充：10px 20px 20px;。这就是你有空白的原因。如果在其他地方不需要，请删除空的p标签并删除.view p类。

添加显示：块;和身高：100％;到了类掩码下的标记，以便在悬停并单击它时可以选择整个图像。

Answer 2

你必须删除这部分代码：

<p class="link-btn"></p>

你似乎不需要它。

对于问题的第二部分，如果您希望在单击整个图像时弹出颜色框，则必须在图像上应用与图像标题相同的行为。我不知道你是怎么做到的。在HTML中它将是：

<a href="your_link"><img src="your image" /></a>

在jQuery中它会给你这样的东西：

$('.myclass').onClick(function() {
// code to display the pop up
});

其中myClass是您必须应用于图片和图片标题的类。

Answer 3

删除每个产品的html代码<p class="link-btn"></p>，如果它在wordpress中，你可以引用该类并使用{display:none;}隐藏它。

需要删除图像下方的空白区域

3 个答案: