0

仅使用 CSS/HTML，我希望页面的左半部分是一个按钮，将用户引导到一个网站 (www.knowfitness.net)，而右半部分则引导到另一个网站（现在是 www.google.com直到我启动另一个站点）..它也需要能够扩展。我最初尝试了一个站点地图，所以这就是图片被分成两半的原因。我最终会换掉图像，但现在这个可以调整大小。更具体地说，我在调整第二张图像的大小时遇到​​了麻烦，该图像应该与第一张图像对齐。

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
#outer {
overflow:hidden;
width:100%;
display:table;
}
#leftcontainer {

float:left;
display:table-cell;
border:5px;
width:50%;
}
#rightcontainer {

float: right;
display:table-cell;
border:5px;
width:50%;
}
    </style>
    </head>



 <body>
<div id="outer">
    <div id="leftcontainer"><a href="http://www.KnowFitness.net/About"><img src=        "http://knowfitness.net/Direct/DirectoryPage1MB.jpg"/></a>

    </div>

<div id="rightcontainer"><a href="http://www.Google.com"><img src= "http://knowfitness.net/Direct/DirectoryPage1MB.jpg" /></a>
    </div>
</div>

4

2 回答 2

0

就像第一个按钮一样，您需要制作第二个按钮float: left以使其彼此对齐，并且right:0px;没有必要

于 2013-09-25T21:37:28.330 回答
0

我看到几个问题。按钮标签需要关闭，所以替换<button />为<button></button>. position: absolute从#outer# remove position: relativebutton1 和#button2 中删除。right:0px;从#button2 中删除。添加float: left;到#button2。这是一个小提琴：http: //jsfiddle.net/b58qf/

于 2013-09-25T21:41:09.947 回答