CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
sss_jee
sss_jee

Reputation: 77

how can I keep the same height from vertical divs?

I am trying to create a ranked system tier that it is scaled based on how much points the user has to earn new ranks , but how can I remove the br's and keep the same height as the image expected?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style>
    .parent {
        display: table;
    }

    .child {
        display: table-cell;
        vertical-align: middle;
        padding-left: 20px;
    }
</style>
<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test<br/> Test Test Test<br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test<br/> Test Test Test<br/> Test Test Test<br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test<br/> Test Test Test<br/> Test Test Test<br/> Test Test Test<br/> Test Test Test
    </div>
</div>
</body>
</html>

system_tier

Upvotes: 1

Views: 334

Answers (4)

Nethra
Nethra

Reputation: 609

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style>
    .parent {
        display: flex;
        align-items:center;
    }

    .child {
        vertical-align: middle;
        padding-left: 20px;
    }
    .child p{ margin:0; }
</style>
<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        <p>Test Test Test</p>
        <p>Test Test Test</p>
   </div>
 
    <div class="child">
        <p>Test Test Test</p>
        <p>Test Test Test</p>
        <p>Test Test Test</p>
    </div>
    <div class="child">
        <p>Test Test Test</p>
        <p>Test Test Test</p>
        <p>Test Test Test</p>
        <p>Test Test Test</p>
    </div>
    <div class="child">
        <p>Test Test Test</p>
        <p>Test Test Test</p>
        <p>Test Test Test</p>
        <p>Test Test Test</p>
        <p>Test Test Test</p>
    </div>
</div>
</body>
</html>

Upvotes: 0

Dhara Parmar
Dhara Parmar

Reputation: 293

<div class="parent">
<div class="child">
    Test
</div>
<div class="child">
    <div> Test Test Test </div>
    <div> Test Test Test </div>
</div>
<div class="child">
    <div> Test Test Test </div>
    <div> Test Test Test </div>
    <div> Test Test Test </div>
</div>
<div class="child">
    <div> Test Test Test </div>
    <div> Test Test Test </div>
    <div> Test Test Test </div>
    <div> Test Test Test </div>
</div>
<div class="child">
    <div> Test Test Test </div>
    <div> Test Test Test </div>
    <div> Test Test Test </div>
    <div> Test Test Test </div>
    <div> Test Test Test </div>
 </div>

Upvotes: 0

Jerdine Sabio
Jerdine Sabio

Reputation: 6130

You could set a specific width for child class, I used 90px but this would collapse on small screens though.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <style>
    .parent {
      display: table;
    }
    
    .child {
      display: table-cell;
      vertical-align: middle;
      padding-left: 20px;
      width: 90px;
      text-align:right;
    }
  </style>
  <div class="parent">
    <div class="child">
      Test
    </div>
    <div class="child">
      Test Test Test Test Test Test
    </div>
    <div class="child">
      Test Test Test Test Test Test Test Test Test
    </div>
    <div class="child">
      Test Test Test Test Test Test Test Test Test Test Test Test
    </div>
    <div class="child">
      Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
    </div>
  </div>
</body>

</html>

Upvotes: 1

Ashwin Bhamare
Ashwin Bhamare

Reputation: 435

With the Flex can you do the same, please refer the below code for same

Use CSS 

.row {
  display: flex; /* equal height of the children */
}    

.col {
  flex: 1; /* additionally, equal width */

  padding: 1em;
  border: solid;
}

Use HTML

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

Upvotes: 1

Related Questions