时间戳

首页 > 解决方案 > 将五个图标排列成两行，形成一个三角形

html - 将五个图标排列成两行，形成一个三角形

问题描述

我正在尝试重新创建的图片

我的 HTML 和 CSS 代码

标签： htmlcss

解决方案

我根据您提供的图片添加了html和css代码，请看一下。

尝试运行此代码段：

img{
  height: 25px;
  width: auto
}



.members-wrapper{
  display: flex;
  flex-flow: row wrap;
   padding: 20px;
   
}

.members-wrapper > div {
    border: 3px dotted brown;
    padding: 20px;
    margin: 5px;
    flex: 1 1 20%;
    box-sizing: border-box;
    max-width: 25%;
   
}

.row1, .row2 {
  display:flex;
  justify-content: center
}

h4 {
  text-align:center
}
<div class="members-wrapper">
  <div class="team">
    <div class="row1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img2">
    </div>
    <div class="row2">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img3">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img4">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img5">
    </div>
    <h4>Team</h4>
  </div>
  <div class="board">
    <div class="row1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <div class="row2">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <h4>Board</h4>
  </div>
  <div class="mentors">
    <div class="row1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <div class="row2">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <h4>Mentors</h4>
  </div>
  <div class="advisors">
    <div class="row1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <div class="row2">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <h4>Advisors</h4>
  </div>
</div>

图片来源：duckduckgo

希望这可以帮助！！

推荐阅读