Question 246224 in Html Question posted in
Some basic documentation can be found here.

Html – Create three inline blocks and freely place elements inside them without effecting other blocks

I am trying to create three blocks with set height and width, aligned on top/bottom and also place couple elements inside them. My problem is that anytime I place additional DIVs into one of the elements are number of DIVs inside of each three elements is not the same, it will display the element with "missing" element 1 line lower. See code example below:

<div class="container">
    <div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
        <div>thing1</div>
        <div>XXX</div>
    </div>
    <div class="d-inline-block border border-success" style="width:16%;height:15vh;">
        <div>thing2</div>
    </div>
    <div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
        <div>thing3</div>
        <div>XXX</div>
    </div>
</div>

I am using Bootstrap 5.0. Above code when rendered will show "thing2" box not aligned with other boxes, pushed lower.

Any ideas for this behaviour?

I’ve tried to wrap elements in additional div to set max height etc, I’ve played with position-relative/absolute, but I simply don’t understand that effect of one box on another.

Tags:

2

Answers


  1. 0

    The issue is occurring due to ‘d-inline-block’. The solution is to use the grid system, the below code helps:

    <div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="block border border-primary">
        <div>thing1</div>
        <div>XXX</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="block border border-success">
        <div>thing2</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="block border border-primary">
        <div>thing3</div>
        <div>XXX</div>
      </div>
    </div>
  </div>
</div>

<style>
  .block {
    height: 15vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
</style>
    Login or Signup to reply.
  2. 0

    If you are keeping using display: inline-block, add vertical-align: top

    Here’s the example snippte:

    .d-inline-block {
    vertical-align: top;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
        <div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
            <div>thing1</div>
            <div>XXX</div>
        </div>
        <div class="d-inline-block border border-success" style="width:16%;height:15vh;">
            <div>thing2</div>
        </div>
        <div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
            <div>thing3</div>
            <div>XXX</div>
        </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search