0
Я создаю себе домашнюю страницу для своего браузера, и я пытаюсь разместить 3 изображения с надписями, равномерно расположенными на делителе. Кажется, что это работает, но граница для верхнего делителя не охватывает изображения. Что я делаю? Вот код.HTML-образ за пределами границы
/* Body: */
body {
\t background-color: #CCCCCC;
}
/* Title: */
#title {
\t color: #00FFFD;
\t text-align: center;
\t font-size: 1000%;
}
/* Main Border: */
#outer_div {
\t width: 100%;
}
#inner_div {
\t width: 80%;
\t margin: auto;
\t border: 10px groove #000;
}
#main {
\t border: 40px solid transparent;
}
/* Link Dividers */
.link {
\t width: 33%;
\t float: left;
\t text-align: center;
}<!DOCTYPE html>
<html>
<head>
\t <title>Hub</title>
\t <link rel="stylesheet" type="text/css" href="css/hub.css" />
</head>
<body>
\t <div id="title"><u>Website Hub</u></div>
\t <div id="outer_div">
\t \t <div id="inner_div">
\t \t \t <div id="main">
\t \t \t \t <div id="row1">
\t \t \t \t \t <div class="link">
\t \t \t \t \t \t <a><img src="img/one.png" border="2px"></a>
\t \t \t \t \t \t <caption>One</caption>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="link">
\t \t \t \t \t \t <a><img src="img/two.jpg" border="2px"></a>
\t \t \t \t \t \t <caption>Two</caption>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="link">
\t \t \t \t \t \t <a><img src="img/three.jpg" border="2px"></a>
\t \t \t \t \t \t <caption>Three</caption>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
</body>
</html>
Попробуйте давать размеры в IMG? .link img { ширина: 100%; } –