मेरे पास निम्नलिखित पहेली है।

JSFIDDLE

मुझे निम्नलिखित छवि के रूप में संरेखण की आवश्यकता है।

enter image description here

मेरा सीएसएस इस प्रकार है। मैं इसे एक पंक्ति और स्तंभ संरचना में संरेखित करने में सक्षम नहीं हूँ।

#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;
}
-1
user2281858 12 अगस्त 2019, 19:12

1 उत्तर

सबसे बढ़िया उत्तर

इसे प्राप्त करने के लिए सीएसएस ग्रिड का प्रयोग करें।

CSS ग्रिड के लिए पूरी गाइड यहाँ

पहला: इसे `` में जोड़ें:

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>

फिर सीएसएस में क्षेत्र को परिभाषित करें:

.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>
0
Kareem Dabbeet 12 अगस्त 2019, 19:32