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

Question

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

在此处输入图像描述

这是我正在使用的 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-->

标签： htmlcss

Answer 1

.知识部分{

  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;

}