在不引导的情况下对齐列和行中的div

Question

我有以下小提琴。

我需要如下图所示的对齐方式。

JSFIDDLE

我的CSS如下。我无法使其按行和列结构对齐。

#part1 {
  width: 15%;
  float: left;
}
#part2 {
  width: 85%;
  float: left;
}
.success {
  background-color: #0ae;
  border-radius: 100px;
  padding: 10px;
  margin-left: 10px;
  margin-top: 20px;
  width: 60px;
  height: 60px;
  font-weight: 500;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  color: white;
  border: 4px solid #10e619;
}
.column {
  float: left;
  width: 100%;
}

.row:after {
  content: '';
  display: table;
  clear: both;
}

Answer 1

使用Css Grid来实现。

Complete Guide To CSS Grid Here

首先：将此添加到``：

grid-template-areas: /* Define Areas */
      "logo l1 l1"
      "logo l2 l3"
      "logo l4 l5"
      "logo l6 l6";
    justify-items: center; /* Fill Horizontally */
    align-items: center;  /* Center Vertically */
    grid-gap: 10px; /* Center spaces between items */

然后通过以下方法定义每个元素的区域：

1-像这样将其添加到html

<div class="label label1">
    content for label 1
</div>

然后在CSS中定义区域：

.label1 {
   grid-area: l1;
}

以此类推。

工作演示：

.userdetails_card {
  background: white;
  color: #000;
  padding: 20px;
  border-radius: 50px;
  clear: both;
  display: table-cell;
  margin-top: 50px;
  position: relative;
  border-radius: 50px;
  box-shadow: 0px 1px 2px 0px lightblue;
  display: inline-grid;
  grid-template-areas: "logo l1 l1" "logo l2 l3" "logo l4 l5" "logo l6 l6";
  justify-items: stretch;
  align-items: center;
  grid-gap: 10px;
  text-align: center;
}

.label {
  border: 1px solid #ccc;
  padding: 5px 10px;
}

.label1 {
  grid-area: l1;
}

.label2 {
  grid-area: l2;
}

.label3 {
  grid-area: l3;
}

.label4 {
  grid-area: l4;
}

.label5 {
  grid-area: l5;
}

.label6 {
  grid-area: l6;
}

.success {
  background-color: #0ae;
  border-radius: 100px;
  padding: 10px;
  width: 60px;
  height: 60px;
  font-weight: 500;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  color: white;
  border: 4px solid #10e619;
  grid-area: logo;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<div class="userdetails_card">
  <div id="part1" class="success">
    <p>AA</p>
  </div>
  <div class="label label1">
    content for label 1
  </div>
  <div class="label label2">
    content for label 2
  </div>
  <div class="label label3">
    content for label 3
  </div>
  <div class="label label4">
    content for label 4
  </div>
  <div class="label label5">
    content for label 5
  </div>
  <div class="label label6">
    content for label 6
  </div>
</div>