本文档旨在解决如何使用 HTML 和 CSS 将文本放置在盒子（div）外部下方的问题。通过修改 CSS 样式，特别是调整边框的放置位置，可以轻松实现文本与盒子的相对位置控制。本文将提供详细的代码示例和解释，帮助开发者理解和应用这一技巧，从而优化网页布局。
在网页设计中，经常需要将文本放置在特定元素的下方，例如图片或容器。以下是一种常用的方法，通过调整 CSS 样式来实现这一效果。
核心思路：
关键在于将边框应用于包含图片或占位符的 img 或类似元素上，而不是整个包含文本的 image 容器。这样，文本将自然地位于边框（即“盒子”）的下方。
具体实现步骤：
-
HTML 结构： 使用 div 元素作为容器，包含一个用于显示图像或占位符的 img 或 div 元素，以及一个用于显示文本的 span 或 p 元素。
<div class="image"> <div class="img"></div> <span class="txt">This is some subtext under an illustration or image.</span> </div>
-
CSS 样式：
- 为 img 或 div 元素添加边框、高度和 border-radius 等样式，使其看起来像一个盒子。
- 确保 image 容器的宽度与 img 或 div 元素的宽度一致。
- 文本元素 span.txt 设置适当的字体大小。
.img { border: 4px solid dodgerblue; height: 150px; border-radius: 8px; text-align: center; } .image { width: 150px; } span.txt { font-size: 18px; }
完整示例代码：
以下是一个完整的 HTML 和 CSS 代码示例，演示如何将文本放置在盒子外部下方：
<!DOCTYPE html>
<html>
<head>
<title>Text Below Box</title>
<style>
.title {
text-align: center;
font-size: 36px;
font-weight: bolder;
color: #1F2937;
margin-top: 45px;
}
.second_container {
display: flex;
justify-content: center;
padding: 30px 0px;
gap: 32px;
}
.img {
border: 4px solid dodgerblue;
height: 150px;
border-radius: 8px;
text-align: center;
}
.image {
width: 150px;
}
span.txt {
font-size: 18px;
}
</style>
</head>
<body>
<div class="title">
Some random Information.
</div>
<div class="second_container">
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration or image.</span>
</div>
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration or image.</span>
</div>
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration or image.</span>
</div>
<div class="image">
<div class="img"></div>
<span class="txt">This is some subtext under an illustration or image.</span>
</div>
</div>
</body>
</html>注意事项：
- 确保 img 或 div 元素的宽度和高度与所需的盒子大小相匹配。
- 可以根据需要调整边框的样式（颜色、粗细、类型）。
- 如果需要更复杂的布局，可以考虑使用 CSS Grid 或 Flexbox。
- 避免使用绝对定位（position: absolute;）除非你有充分的理由，因为它可能会导致布局问题。
总结：
通过将边框应用于 img 或 div 元素，而不是整个容器，可以轻松地将文本放置在盒子外部下方。这种方法简单有效，适用于各种网页设计场景。希望本教程能帮助你解决相关问题，并提升你的网页开发技能。
