我有一个 div 部分，里面有 3 个 div 项，我希望它们使用 html css 均匀分布答案

【问题标题】：I have a div section with 3 div items inside and I want them to be spaced evenly using html css我有一个 div 部分，里面有 3 个 div 项，我希望它们使用 html css 均匀分布
【发布时间】：2019-12-07 18:27:03
【问题描述】：

我有一个 div 部分，里面有三个 div，我希望它们均匀分布。这是它目前在我的网站上的样子。我的目标是让它们全部对齐并均匀分布。

enter image description here

这是我正在使用的 CSS 和 HTML：

.knowledge-section {
}

.section-icon {
	height: 25px;
	width: 25px;
	display: inline-block;
	position: absolute;
	top: 0px;
	left: 0px;
}

.knowledge-item {
	background: white;
	border-radius: 4px;
	padding-top: 2px;
	padding-bottom: 30px;
	padding-left: 40px;
	padding-right: 35px;
	display: inline-block;
	position: relative;
}

.first-item {
    margin-right: 20px;
}

  <div class="knowledge-section">

    <div class="knowledge-item first-item">
        <div class="section-icon"><img src="admin-suite.png" />   </div>
      <h2>Admin Suite</h2>
    </div><!--k-item-->

    <div class="knowledge-item">
        <div class="section-icon"><img src="mobile.png" /></div>
      <h2>Mobile and Voices</h2>
    </div><!--k-item-->
      
    <div class="knowledge-item">
        <div class="section-icon"><img src="conversations.png" /></div>
        <h2><a href="www.google.com">Conversations</a></h2>
    </div><!--k-item-->

  </div> <!--k-section-->

  <div class="knowledge-section">

    <div class="knowledge-item first-item">
        <div class="section-icon"><img src="digital.png" /></div>
      <h2>Digital</h2>
    </div><!--k-item-->

    <div class="knowledge-item">
        <div class="section-icon"><img src="journey-analytics.svg" /></div>
      <h2>Journey Analytics</h2>
    </div><!--k-item-->
      
    <div class="knowledge-item">
        <div class="section-icon"><img src="strikedeck.png" /></div>
        <h2><a href="www.google.com">Strikedeck</a></h2>
    </div><!--k-item-->

  </div> <!--k-section-->

【问题讨论】：

注意：<img> 标签不使用也不需要结束斜线，并且在 HTML 中从来没有。
这能回答你的问题吗？ how to evenly distribute elements in a div next to each other? - 这个问题很老，但有新的相关答案：stackoverflow.com/a/33239116/1172189

标签： html css

【解决方案1】：

您只需要将类 .knowledge-section 的 div 显示为 flex 容器，如下所示：

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

【讨论】：

感谢 Azafo。我能够使用以下方法使它看起来非常好： .knowledge-section { width: 100%;显示：弯曲； justify-content: 之间的空格；然后我在知识项中添加了 33% 的宽度规则： .THIS .knowledge-item { background: white;填充顶部：2px；底部填充：30px； padding-left: 40px; padding-right: 35px;显示：内联块；位置：相对；宽度：33%；我遇到的唯一问题是在移动设备上查看时无法正确调整大小。有什么建议吗？
您可以编写@media screen 以在像这样的小型设备上正确呈现它：@media(max-width: 600px) { .knowledge-section { flex-direction: column;颜色：棕色； } .knowledge-item { 显示：弹性；宽度：100%； } }，并在样式表顶部为您的页面添加重置样式 *{box-sizing:border-box;}
太棒了！感谢您的帮助 Azafo。

【解决方案2】：

.knowledge-section {

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

}

.section-icon {

display:grid;
justify-content:center;

}

h2 {

 text-align: center;
 background-color:burlywood;

}

.知识项{

background:coral;

}

【讨论】：

【解决方案3】：

        <div class="knowledge-item first-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" />   </div>
          <h2>Admin Suite</h2>
        </div><!--k-item-->

        <div class="knowledge-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" /></div>
          <h2>Mobile and Voices</h2>
        </div><!--k-item-->

        <div class="knowledge-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" /></div>
            <h2><a href="www.google.com">Conversations</a></h2>
        </div><!--k-item-->

        <div class="knowledge-item first-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" /></div>
          <h2>Digital</h2>
        </div><!--k-item-->

        <div class="knowledge-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" /></div>
          <h2>Journey Analytics</h2>
        </div><!--k-item-->

        <div class="knowledge-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" /></div>
            <h2><a href="www.google.com">Strikedeck</a></h2>
        </div><!--k-item-->

      </div> <!--k-section-->

【讨论】：

现在我用一个知识部分包装了所有子 div（知识项）。您可以使用相同的格式来拆分它们，以防您希望它们在每个知识部分中分成三个 div。

【解决方案4】：

@Azafo 我能够使用您的代码的修改版本让它看起来相当不错：

.knowledge-section {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

然后我在知识项中添加了 33% 的宽度规则：

.THIS .knowledge-item {
	background: white;
	padding-top: 2px;
	padding-bottom: 30px;
	padding-left: 40px;
	padding-right: 35px;
	display: inline-block;
	position: relative;
        width: 33%;
}

它的外观如下：

enter image description here

我遇到的唯一问题是在移动设备上查看时无法正确调整大小。有什么建议么？以下是它在移动设备上的外观：

enter image description here

【讨论】：