2

私はこれに数時間を費やしましたが、これを行う方がはるかに簡単だと思います。完全にリンク可能に保ちながら、3つのdivを水平方向に中央に配置しようとしていますが、最終的にそれをあきらめてテーブルを試しました（：-o ）。

最初のものは、divをリンクしようとして失敗したことを示しています。

 <center><table>
    <tr>

    <td>
    <a href="http://google.com" style="display:block;height:100%;width:100%">
    <div>
    a
    </div>
    </a>
    </td>
    <td>b</td>
    <td>c</td>
    </tr>
    </table>

CSSを使用

tbody tr td{
width: 300px;
height: 200px;
border: 2px solid #000;
background-color: #000;
opacity: 0.7;
color: #fff;
font-size: 30px;
font-family: 'calibri'; //temporary
padding: 30px;
}
body center table
{
border-spacing: 20px;
margin-top: -90px;
}
tr td a{
height:150%;
width:150%;
}

誰かがdivまたはtablesでこれを行う方法を知っているなら、あなたの応答は大歓迎です！

4

3 に答える 3

8

sを使用する必要tableはまったくありません。ここでの鍵はですdisplay: inline-block;。ここで実際の動作を確認してください：小さなリンク。HTML：

<div class = "onediv"><a href = "#">Glee is awesome!</a></div>
<div class = "onediv"><a href = "#">Glee is awesome!</a></div>
<div class = "onediv"><a href = "#">Glee is awesome!</a></div>​

CSS：

body { /*this should be whatever is containing your three divs*/
    text-align: center; /*center them*/
    white-space: nowrap; /*make sure they're all on the same line*/
}
.onediv {
    display: inline-block; /*magic*/
    height: 200px; /*or whatever you want*/
    width: 150px;
    /*make it look pretty*/
    background: rgb(0, 162, 232);
    color: white;
}
a {
    color: white;
    height: 100%; /*spans the whole div vertically*/
    width: 100%; /*and horizontally (not necessary, but can't hurt!)*/
    display: block; /*otherwise the height and width definitions won't work*/
}​
于 2012-10-06T12:25:52.070 に答える
2

このような意味ですか？

デモ

HTML：

<div id="wrapper">
<div><a href="#">a</a></div>
<div><a href="#">b</a></div>
<div><a href="#">c</a></div>
</div>

CSS：

#wrapper, #wrapper * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
#wrapper {
    margin:0 auto;
    width:1020px; /* width of divs + margin */
}
#wrapper > div {
    float:left;
    width:300px;
    height: 200px;
    text-align:center;
    margin:20px;
    border: 2px solid #000;
    line-height:140px; /* optional, will center the text vertically */
    background-color: #000;
    opacity: 0.7;
    font-size: 30px;
    font-family: 'calibri';
    padding: 30px;
}
#wrapper > div a {
    display:block;
    color: #fff;
}

<strong>編集：スタイリングで更新

于 2012-10-06T12:20:25.820 に答える
1 
<td>
<a href="http://google.com" style="display:block;height:100%;width:100%">
<div>
a
</div>
</a>
</td>

あなたはすべてtdのdiv裏地を作ります。

于 2012-12-27T10:33:28.423 に答える