0

我在 wordpress 页面上使用 2x2 网格来显示一些在鼠标悬停期间发生变化的图像。

使用 2 列 1 行网格，图像完全水平对齐，但是当我添加第二行时，底部的两个图像不对齐。

我将此代码放入我的 CSS 样式表中

.grid {
    width: 704px;
    margin: auto;
    vertical-align: middle;
}
.grid-m1 {
    float: left;
    width: 22px;
    height: 1px;
}
.grid-c1 {
    float: left;
    width: 320px;
}
.grid-m2 {
    float: left;
    width: 22px;
    height: 1px;
}
.grid-c2 {
    float: left;
    width: 320px;
}

然后在我的新页面中输入：

<div class="grid">
    <p class="grid-m1"></p>
    <p class="grid-c1"><a id="top left" href="top left">
<img title="Top Left" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left.png" />
</a>
    </p>
    <p class="grid-m2"></p>
    <p class="grid-c2"><a id="top right" href="top right">
<img title="Top Right" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right.png" />
</a>
    </p>
</div>
<div class="grid">
    <p class="grid-m1"></p>
    <p class="grid-c1"><a id="bottom left" href="bottom left">
<img title="Bottom Left" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right.png" />
</a>
    </p>
    <p class="grid-m2"></p>
    <p class="grid-c2">
        <img src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/focus-group.png" />
    </p>
</div>

http://jsfiddle.net/isherwood/DZqQJ/

正如您通过查看我的网站所看到的那样：quickfoqus.com/studies/test 我无法让这 4 个图像在网格上正确排列。

我在我的 css 上尝试了垂直对齐标签，但这似乎不起作用。

谢谢您的帮助！

4

1 回答 1

1

您的普通渐变图像在顶部和侧面有空白空间。你的人物形象没有。这是应用到该图像的边距以使事物排列的布局：

http://jsfiddle.net/isherwood/DZqQJ/1/

<img src="http://.../focus-group.png" style="margin: 10px 0 0 15px;" />
于 2013-09-10T17:23:18.503 回答