我有一个div部分，里面有3个div项，我希望使用html css将它们均匀地隔开

我有一个div部分，里面有三个div，我希望它们间隔均匀。以下是我的网站上当前的外观。我的目标是使它们都对齐并均匀地隔开

以下是我正在使用的CSS和HTML：

.knowledge部分{
}
.节图标{
高度：25px；
宽度：25px；
显示：内联块；
位置：绝对位置；
顶部：0px；
左：0px；
}
.知识项目{
背景：白色；
边界半径：4px；
垫顶：2件；
填充底部：30px；
左侧填充：40px；
右边填充：35px；
显示：内联块；
位置：相对位置；
}
.第一项{
右边距：20px；
}

管理套件
手机和语音
数字的
旅程分析

。知识部分{

  display: grid;
  grid-template-columns: repeat(6, auto);
  background-color:gold;
  padding:10px;
  grid-gap:10px;

}

.节图标{

display:grid;
justify-content:center;

}

氢{

}

.知识项目{

background:coral;

}知识部分{

  display: grid;
  grid-template-columns: repeat(6, auto);
  background-color:gold;
  padding:10px;
  grid-gap:10px;

}

.节图标{

display:grid;
justify-content:center;

}

氢{

}

.知识项目{

background:coral;

}

管理套件
手机和语音
数字的
旅程分析

管理套件
手机和语音
数字的
旅程分析

您只需将div与class

一起显示为flex容器，如下所示：

.knowledge-section {
        width: 800px;
        display: flex;
        justify-content: space-between;
    }

您只需将带有class
.knowledge部分的div显示为flex容器，如下所示：

.knowledge-section {
        width: 800px;
        display: flex;
        justify-content: space-between;
    }

@Azafo我能够使用您的代码的修改版本使它看起来非常好：


.knowledge部分{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
}
@Azafo我使用修改后的代码使它看起来很不错：


.knowledge部分{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
}
注意：
标记不使用，也不需要结束斜杠，而且在HTML中从未使用过。这是否回答了您的问题这个问题很老，但有新的相关答案：注意：
标记不使用，也不需要结束斜杠，而且在HTML中从未使用过。这是否回答了您的问题？-这个问题由来已久，但有了新的相关答案：现在我用一个知识部分包装了所有的子div（知识项）。您可以使用相同的格式将它们拆分，以防您希望它们在每个知识部分内被拆分为三个div。现在，我将所有子div（知识项）打包为一个知识部分。您可以使用相同的格式将它们拆分，以防您希望将它们在每个知识部分中拆分为三个div。谢谢Azafo。我可以使用以下方法使它看起来非常好：。知识部分{width:100%；display:flex；justify content:space between；}然后我向知识项添加了33%的宽度规则：。THIS.knowledge项{背景：白色；填充顶部：2px；填充底部：30px；填充左侧：40px；填充右侧：35px；显示：内联块；位置：相对；宽度：33%；}我遇到的唯一问题是在移动设备上查看时，它的大小不能正确调整。有什么建议吗？您可以编写@media screen，以便在小型设备上正确渲染它：@media（最大宽度：600px）{.knowledge部分{flex direction:column；color:brown；}.knowledge项{display:flex；width:100%；}}，并在样式表顶部为页面添加重置样式*{box size:border box；}太棒了！感谢您的帮助Azafo。感谢Azafo。我使用以下内容使其看起来非常好：.knowledge部分{width:100%；display:flex；justify content:space between；}然后我在知识项中添加了33%的宽度规则：。此。知识项{背景：白色；顶部填充：2px；底部填充：30px；左侧填充：40px；右侧填充：35px；显示：内联块；位置：相对；宽度：33%；}我遇到的唯一问题是在移动设备上查看时，它的大小不能正确调整。有什么建议吗？您可以编写@media screen，以便在小型设备上正确渲染它：@media（最大宽度：600px）{.knowledge部分{flex direction:column；color:brown；}.knowledge项{display:flex；width:100%；}}，并在样式表顶部为页面添加重置样式*{box size:border box；}太棒了！感谢您的帮助。