gpt4 book ai didi

边框外的 HTML 图像

转载 作者:行者123 更新时间:2023-11-28 07:19:36 26 4
gpt4 key购买 nike

我正在为我的浏览器创建一个主页,我试图将 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>

最佳答案

您总是可以将边框声明放在 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 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32160531/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com