当前位置：首页 > article >正文

前端设置 div 标签内子多个子 div 内容，在一行展示，并且可以字段自动换行

article 2024/11/28 5:36:09

如果你希望多个子 div 标签在父 div 内部展示在一行上，并且每个子 div 的内容可以根据需要自动换行，可以使用 CSS 的 flexbox 布局来实现。flexbox 使得布局更加灵活，能控制子项的排列方式，并允许内容根据父容器的宽度自动换行。

实现步骤：

父 div 设置为 flex 布局。
子 div 元素设置自动换行。
适配不同内容长度，确保长文本能根据需要换行。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 自动换行示例</title>
  <style>
    /* 设置父 div 为 flex 布局 */
    .parent {
      display: flex;
      flex-wrap: wrap;  /* 允许子项自动换行 */
      gap: 10px;        /* 子元素间距 */
      border: 1px solid #ccc;
      padding: 10px;
    }

    /* 设置子 div */
    .child {
      flex: 1 1 200px;   /* 每个子 div 至少占 200px，允许伸缩 */
      padding: 10px;
      border: 1px solid #ddd;
      background-color: #f9f9f9;
      word-wrap: break-word;  /* 长文本自动换行 */
    }
  </style>
</head>
<body>

  <div class="parent">
    <div class="child">
      这是第一个子 div，内容会自动换行，测试长文本的时候这个内容会变得很长，比如说这里是一个长链接： https://www.example.com/this-is-a-very-long-url-that-will-automatically-break-and-wrap-around。
    </div>
    <div class="child">
      第二个子 div。这个内容比较短，所以它不会自动换行。
    </div>
    <div class="child">
      这是第三个子 div。你可以把这个文本拉长看看效果。
    </div>
  </div>

</body>
</html>

解释：

display: flex;：父 div 设置为 flex 布局，使其子元素（子 div）按行排列。
flex-wrap: wrap;：允许子 div 自动换行，如果一行内空间不够，子元素会移动到下一行。
gap: 10px;：设置子元素之间的间距，使得每个子 div 之间保持一定的距离。
flex: 1 1 200px;：每个子 div 至少占据 200px 宽度，同时允许在父容器空间宽裕时进行伸缩。1 表示子元素可以伸缩，200px 是最小宽度。
word-wrap: break-word;：确保子 div 内的长文本（例如长网址或单词）会自动换行，避免溢出。

调整内容：

你可以根据需要调整 flex: 1 1 200px; 中的 200px，以控制子 div 的最小宽度。也可以根据实际内容进行适当调整。
如果你不希望子元素的宽度根据父容器宽度进行伸缩，可以将 flex 改为 flex: 0 1 auto; 或设置固定宽度，例如 width: 200px;。