我花了几个小时的时间来做这个,我认为这样做要简单得多..我试图将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或table执行此操作,我们非常感谢您的回复!
答案 0 :(得分:8)
根本不需要使用table
。这里的关键是display: inline-block;
。在此处查看此操作:little link。 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*/
}
答案 1 :(得分:2)
你的意思是这样吗?
<强> Demo 强>
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;
}
修改:使用样式进行更新
答案 2 :(得分:1)
<td>
<a href="http://google.com" style="display:block;height:100%;width:100%">
<div>
a
</div>
</a>
</td>
您将td
div
所有{{1}}排除。