Как установить маржу Dynami c?

Question

У меня есть один div и три дочерних div, проверьте код ниже

<div class="parent">
   <div class="child">
     <icontag />
     <texttag />
   </div>
   <div class="child">
     <icontag />
     <texttag />
   </div>
   <div class="child">
     <icontag />
     <texttag />
   </div>
</div>

каждый дочерний тег состоит из icontag и texttag, а текстовый тег имеет динамическое c высота.

но все поля тега значка должны быть одинаковыми, даже если высота текстового тега отличается.

для получения дополнительных объяснений см. рисунок.

введите описание изображения здесь

как на картинке выше, последний текст многострочный. итак, высота последнего дочернего тега отличается от других тегов.

как я могу это сделать?

Answer 1

Вот пример с grid и flexbox.

Попробуйте, это может соответствовать вашим потребностям

.child {
   display: flex;
   align-items: center;
}
.parent {
   display: grid;
   grid-template-rows: 33% 33% 33%;
}

.child .icon {
   border-radius: 50%;
   border: 1px solid blue;
   height: 40px;
   width: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-right: 20px;
}
.child p {
   max-width: 100px;
}
.wrapper {
   display: flex;
   align-items: center;
}
.same {
   margin-right: 30px;
}

<div class="wrapper">
   <p class="same">Same height</p>
   <div class="parent">
      <div class="child">
         <div class="icon">1</div>
         <p>Bla bla bla bla bla bla bla bal dsfafda af afas fa faf af</p>
      </div>
      <div class="child">
         <div class="icon">1</div>
         <p>Bla bla bla</p>
      </div>
      <div class="child">
         <div class="icon">1</div>
         <p>Bla bla bla bla bla bla bla bal dsfafda af afas fa faf af</p>
      </div>
   </div>
</div>

Answer 2

Попробуйте добавить max-height ко всем дочерним div ..

.child {
  --
  --
  max-height: 300px;  // give max height as per your design
  overflow-y: auto;
}

Answer 3

Попробуйте следующее:

   <div class="parent">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
         <icontag />
         <texttag />
       </div>
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
         <icontag />
         <texttag />
       </div>
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
         <icontag />
         <texttag />
       </div>
    </div>

Вы можете установить отступ для дочернего класса.

padding: 10px;

Answer 4

Вы можете использовать display: flex для дочерних элементов и align-items: center для вертикального центрирования содержимого.

Затем используйте свойство padding (или margin также может работать), чтобы оставить пространство между .child элементы, как в следующем фрагменте.

.child{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 500px;
  padding: 15px 0;
}

.icon{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 2px solid #0000ff;
  display: flex;
  align-items:center;
  justify-content: center;
  margin-right: 15px;
}

.text{
  flex: 1;
}

.child.third .icon{
  width: 50px;
  height: 50px;
}

<div class="parent">
   <div class="child first">
     <div class="icon">1</div>
     <div class="text">Foo bar baz</div>
   </div>
   <div class="child second">
     <div class="icon">2</div>
     <div class="text">Foo bar baz</div>
   </div>
   <div class="child third">
     <div class="icon">3</div>
     <div class="text">Foo bar baz<br/>Foo bar baz</div>
   </div>
   <div class="child fourth">
     <div class="icon">4</div>
     <div class="text">Foo bar baz<br/>Foo bar baz</div>
   </div>
</div>

Но обратите внимание, что если тексты намного длиннее, чем значки, это может нарушить макет, и вам нужно присвоить stati c высоту child Предметы. Но таким образом тексты могут перекрываться.