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

边框外的HTML图像

1 个答案: