边框外的HTML图像

Question

我正在为我的浏览器做一个主页，我试着在一个分隔线上放置3张标题均匀分布的图片。它似乎可以工作，但最外面的分隔线的边界没有覆盖图像。我做什么好？下面是代码。

​

/* Body: */
body {
	background-color: #CCCCCC;
}
/* Title: */
#title {
	color: #00FFFD;
	text-align: center;
	font-size: 1000%;
}
/* Main Border: */
#outer_div {
	width: 100%;
}

#inner_div {
	width: 80%;
	margin: auto;
	border: 10px groove #000;
}

#main {
	border: 40px solid transparent;
}
/* Link Dividers */
.link {
	width: 33%;
	float: left;
	text-align: center;
}

<!DOCTYPE html>
<html>

<head>
	<title>Hub</title>
	<link rel="stylesheet" type="text/css" href="css/hub.css" />
</head>
<body>
	<div id="title"><u>Website Hub</u></div>
	<div id="outer_div">
		<div id="inner_div">
			<div id="main">
				<div id="row1">
					<div class="link">
						<a><img src="img/one.png" border="2px"></a>
						<caption>One</caption>
					</div>
					<div class="link">
						<a><img src="img/two.jpg" border="2px"></a>
						<caption>Two</caption>
					</div>
					<div class="link">
						<a><img src="img/three.jpg" border="2px"></a>
						<caption>Three</caption>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

​

Answer 1

您总是可以将边框声明放在CSS中。

.link {
    width: 33%;
    float: left;
    text-align: center;
    border: 2px solid #1f1f1f;
}

或者扩展声明：

.link a img { border: 2px solid #1f1f1f; }
.link a { width: 100%; } // Will be inherited by the child element...