Question

仅使用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>

Answer 1

就像您需要设置第二个按钮float: left以使其彼此对齐并且不需要right:0px;所需的第一个按钮

Answer 2

我看到一些问题。需要关闭按钮标记，因此请将<button />替换为<button></button>。从＃button 1和＃button2中删除position: absolute，#outer中的remove position: relative。从＃button2中删除right:0px;。将float: left;添加到＃button2。这是一个小提琴：http://jsfiddle.net/b58qf/

两个按钮调整大小到网页

2 个答案: