0

CSS/HTML のみを使用して、ページの左半分をユーザーを 1 つの Web サイト (www.knowfitness.net) に誘導するボタンにし、右半分を別の Web サイト (今のところ www.google.com) に誘導するボタンにしたいと考えています。他のサイトが立ち上がるまで..同様にスケーリングできる必要があります。もともとサイトマップを撮ろうとしたので、写真が半分に割れています。最終的に画像を交換しますが、今のところ、これはサイズを変更するだけです。最初の画像の隣に配置されるはずの2番目の画像のサイズを変更する際に、より具体的に問題が発生しました。

<!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

いくつかの問題があります。ボタン タグは閉じる必要があるため、 に置き換え<button />ます<button></button>。#button1 と #button2 からposition: absoluteを#outer削除します。#button2 からremove position: relative削除します。#button2right:0px;に追加します。float: left;ここにフィドルがあります：http://jsfiddle.net/b58qf/

于 2013-09-25T21:41:09.947 に答える
0

最初のボタンと同じように、2 番目のボタンfloat: leftを並べて配置する必要がありますが、これright:0px;は必要ありません。

于 2013-09-25T21:37:28.330 に答える