如何将文本放置在盒子外部下方？-html教程-PHP中文网

如何将文本放置在盒子外部下方？

DDD

发布： 2025-08-12 17:26:20

原创

318人浏览过

如何将文本放置在盒子外部下方？

本文档旨在解决如何使用 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 样式：

阶跃星辰开放平台
阶跃星辰旗下开放平台，提供文本大模型、多模态大模型、繁星计划

0

查看详情
- 为 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>

登录后复制

注意事项：