移动显示：将链接文本阻止到 div 底部
因此，我有一个具有翻转效果的 Div，它会更改翻转时的边框颜色，为了使该 div 成为链接，我已将链接放入 DIV 中，并给它一个 Display: Block 属性，以便它填充div。
我遇到的困难是让文本与该 div 的左下角对齐，同时保持阻塞，以便整个滚动区域保持链接。
对于这个问题的任何解决方案，我将不胜感激，感谢您提前提供的帮助，我已经为此奋斗了一段时间。
http://www.klossal.com/media/index_test.html
这是测试页面，这是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MEDIA</title>
</head>
<SCRIPT TYPE="text/javascript">
<!--
function mouseover()
{
document.getElementById("thediv").style.borderLeft="10px solid black";
}
function mouseout()
{
document.getElementById("thediv").style.borderLeft="10px solid #898787";
}
//-->
</SCRIPT>
<style type="text/css">
</style>
</HEAD>
<link rel="shortcut icon" href="\favicon.ico">
<body>
<DIV style="width:200px;height:200px;border-left:10px solid #898787" id=thediv
onmouseover="mouseover()" onmouseout="mouseout()">
<a style="padding-top:1cmpx;" href="www.klossal.com">LINK IT BABY</a>
<DIV>
</body>
</html>
</body>
So I have this Div that has a roll over effect on it where it changes the border color on roll over, in order to make this div a link I've put a link into the DIV and given it a Display: Block property so it fills the div.
What I'm having an incredibly hard time doing is getting the text to align to the bottom left corner of this div while keeping the blocking so the whole roll over area stays a link.
ANY solutions to this problem I'd greatly appreciate, thanks for your help in advance I've been battling this for a while.
http://www.klossal.com/media/index_test.html
this is the test page and this is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MEDIA</title>
</head>
<SCRIPT TYPE="text/javascript">
<!--
function mouseover()
{
document.getElementById("thediv").style.borderLeft="10px solid black";
}
function mouseout()
{
document.getElementById("thediv").style.borderLeft="10px solid #898787";
}
//-->
</SCRIPT>
<style type="text/css">
</style>
</HEAD>
<link rel="shortcut icon" href="\favicon.ico">
<body>
<DIV style="width:200px;height:200px;border-left:10px solid #898787" id=thediv
onmouseover="mouseover()" onmouseout="mouseout()">
<a style="padding-top:1cmpx;" href="www.klossal.com">LINK IT BABY</a>
<DIV>
</body>
</html>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
要将某些内容与底部对齐，可以将
position设置为absolute，将bottom设置为0px。这会将其与绝对或相对定位的第一个父级的底部对齐。在您的情况下，将
DIV的position设置为relative，将链接的position设置为绝对和0px链接的底部：http://jsfiddle.net/rodin/jxyZz/
另外，你可以用纯CSS实现翻转效果，参见fiddle。如果您想让整个框成为一个链接，则该框应为
A，文本应为DIV（反之亦然）。To align something to the bottom, one can set the
positiontoabsoluteandbottomto0px. This will align it to bottom of the first parent that is positioned either absolute or relative.In your case, set the
positionof theDIVtorelative, thepositionof the link toabsoluteand thebottomof the link to0px:http://jsfiddle.net/rodin/jxyZz/
And by the way, you can achieve the rollover effect with pure CSS, see the fiddle. If you want to make the entire box a link, the box should be an
Aand the text aDIV(you did it the other way around).您可以添加一个额外的 span 元素，该元素将定位在链接的底部。请注意，您也可以在 css 中创建悬停效果： http://jsfiddle.net/Te23c/
Html
text
CSS
You could add an additional span element that will positioned a the bottom of the link. Note you could create the hover effect in css as well: http://jsfiddle.net/Te23c/
Html
text
CSS