Question

我尝试过在网上找到的几个不同的例子，但现在我已经没有想法...... 我试图在页面上并排放置两个图像链接。

我目前的代码如下：

HTML

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="home">
<a href="http://www.xxx.net/blog/" id="h1"></a>
<a href="http://www.xxx.net/gallery/" id="h2"></a>
</div>

CSS

div.home a {
    float: left;
}

div.home {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

div.home #h1 {
    width:  500px;
    height: 350px;
    display: block;
    background-image: url('header1.jpg');
}

div.home #h1:hover {
    background-image: url('header1hover.jpg');
}

div.home #h2 {
    width:  500px;
    height: 350px;
    display: block;
    background-image: url('header2.jpg');
}

div.home #h2:hover {
    background-image: url('header2hover.jpg');
}

Answer 1

您可以将图像放在包含2个字段的表格行中。然后在中心显示该表。

Answer 2

您应该将display : inline添加到a代码并设置正确的宽度

<强>更新

请参阅此Demo

并排放置两个图像链接

2 个答案: