CODEWITHSUNDEEP
cssreactjs
sjm
sjm

Reputation: 37

How set dynamic margin?

i have one div and three child div, check out the code below

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

each child tag composed of icontag and texttag and text tag is of dynamic height.

but, each icon tag margin must be same, even if text tag height is different.

for more explanation, refer to the picture.

enter image description here

as the above picture, the last text is multiline. so, last child tag height is diffent from other tags.

how can I do that?

Upvotes: 1

Views: 2335

Answers (4)

Mohanraj Periyannan
Mohanraj Periyannan

Reputation: 318

Try this :

   <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>

You can set padding for child class.

padding: 10px;

Upvotes: 0

Ilijanovic
Ilijanovic

Reputation: 14904

Here is an example with grid and flexbox.

Try this, it might fit your needs

.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>

Upvotes: 1

Harun Yilmaz
Harun Yilmaz

Reputation: 8558

You can use display: flex on child items and align-items: center to vertically center the content.

Then use padding property (or margin could work as well) to have some space between .child items as in the following snippet.

.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>

But note that, if the texts are much longer than the icons, it could break the layout and you need to give static height to child items. But this way texts may overlap.

Upvotes: 0

aks44
aks44

Reputation: 432

Try adding max-height to all child div..

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

Upvotes: 0

Related Questions