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

张国伟 · 2025-2-24 20:03:38

您需要登录才可以下载或查看，没有账号？立即注册

x

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

示例代码：

<!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 内的长文本（比方长网址或单词）会自动换行，避免溢出。

调解内容：

顺应性：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告

		自动登录	找回密码
密码			立即注册

0 个回复