Align fields with CSS

Question

I want to keep the area where the authors are in a fixed ratio as seen in the image. How can I keep the authors field constant as the field that does not change even if the title and content are not the same?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="row justify-content-between mt-5">
  <div class="col-md-4 mt-5 mb-5">
    <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
      <img src="https://siyahklasor.com/uploads/articles_images/articles_163/photo-3663910902.jpg" class="img-fluid rounded">
    </a>

    <div class="sq-category mb-3 mt-2">
      <span class="text-muted">Genel</span>
    </div>

    <div class="sq-title">
      <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
        <h2 class="sq-h2">Excelde en çok kullanılan formüller</h2>
      </a>
    </div>
    <div class="mt-3">
      <p>Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...</p>
    </div>

    <div class="media mt-5 sq-profile">
      <a href="https://siyahklasor.com/profile" class="text-decoration-none">
        <img src="https://siyahklasor.com/assets/img/1596865798.png" class="avatar mr-3">
      </a>
      <div class="media-body">
        <p class="mt-1"><strong>Mehmet Sezenoğlu</strong> <br> 31 Ağustos 2020</p>

      </div>

    </div>

  </div>
  <div class="col-md-4 mt-5 mb-5">
    <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
      <img src="https://siyahklasor.com/uploads/articles_images/articles_163/photo-3663910902.jpg" class="img-fluid rounded">
    </a>

    <div class="sq-category mb-3 mt-2">
      <span class="text-muted">Genel</span>
    </div>

    <div class="sq-title">
      <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
        <h2 class="sq-h2">Excelde en çok kullanılan formüller</h2>
      </a>
    </div>
    <div class="mt-3">
      <p>Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...</p>
    </div>

    <div class="media mt-5 sq-profile">
      <a href="https://siyahklasor.com/profile" class="text-decoration-none">
        <img src="https://siyahklasor.com/assets/img/1596865798.png" class="avatar mr-3">
      </a>
      <div class="media-body">
        <p class="mt-1"><strong>Mehmet Sezenoğlu</strong> <br> 31 Ağustos 2020</p>

      </div>

    </div>

  </div>
  <div class="col-md-4 mt-5 mb-5">
    <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
      <img src="https://siyahklasor.com/uploads/articles_images/articles_163/photo-3663910902.jpg" class="img-fluid rounded">
    </a>

    <div class="sq-category mb-3 mt-2">
      <span class="text-muted">Genel</span>
    </div>

    <div class="sq-title">
      <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
        <h2 class="sq-h2">Excelde en çok kullanılan formüller</h2>
      </a>
    </div>
    <div class="mt-3">
      <p>Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...</p>
    </div>

    <div class="media mt-5 sq-profile">
      <a href="https://siyahklasor.com/profile" class="text-decoration-none">
        <img src="https://siyahklasor.com/assets/img/1596865798.png" class="avatar mr-3">
      </a>
      <div class="media-body">
        <p class="mt-1"><strong>Mehmet Sezenoğlu</strong> <br> 31 Ağustos 2020</p>

      </div>

    </div>

  </div>
</div>

Use flexbox to align all the authors to the **bottom** of the column? Otherwise - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks — Paulie_D, Oct 07 '20 at 07:22

disinfor · Accepted Answer · 2020-10-07T21:07:12.257

You will need to wrap your .mt-3 and .sq-profile in another element to make this work.

You can then make your col-md-4 element a flex-parent and set the direction to column. To make sure that this doesn't affect other .col-md-4 elements on your site, you should probably give these elements a unique class.

Then you set the new wrapping element to a flex parent and set it's height to the remainder of the container height (flex: 1 1 100%), set the flex-direction to column and then justify the content to space-between. That will force the text to the top and the profile to the bottom.

.col-md-4 {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}

.content-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="row justify-content-between mt-5">
  <div class="col-md-4 mt-5 mb-5">
    <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
      <img src="https://siyahklasor.com/uploads/articles_images/articles_163/photo-3663910902.jpg" class="img-fluid rounded">
    </a>

    <div class="sq-category mb-3 mt-2">
      <span class="text-muted">Genel</span>
    </div>

    <div class="sq-title">
      <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
        <h2 class="sq-h2">Excelde en çok kullanılan formüller</h2>
      </a>
    </div>
    <div class="content-wrap">
      <div class="mt-3">
        <p>Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...</p>
      </div>

      <div class="media mt-5 sq-profile">
        <a href="https://siyahklasor.com/profile" class="text-decoration-none">
          <img src="https://siyahklasor.com/assets/img/1596865798.png" class="avatar mr-3">
        </a>
        <div class="media-body">
          <p class="mt-1"><strong>Mehmet Sezenoğlu</strong> <br> 31 Ağustos 2020</p>

        </div>

      </div>
    </div>

  </div>
  <div class="col-md-4 mt-5 mb-5">
    <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
      <img src="https://siyahklasor.com/uploads/articles_images/articles_163/photo-3663910902.jpg" class="img-fluid rounded">
    </a>

    <div class="sq-category mb-3 mt-2">
      <span class="text-muted">Genel</span>
    </div>

    <div class="sq-title">
      <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
        <h2 class="sq-h2">Excelde en çok kullanılan formüller</h2>
      </a>
    </div>
    <div class="content-wrap">
      <div class="mt-3">
        <p>Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası
          iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda
          pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...</p>
      </div>

      <div class="media mt-5 sq-profile">
        <a href="https://siyahklasor.com/profile" class="text-decoration-none">
          <img src="https://siyahklasor.com/assets/img/1596865798.png" class="avatar mr-3">
        </a>
        <div class="media-body">
          <p class="mt-1"><strong>Mehmet Sezenoğlu</strong> <br> 31 Ağustos 2020</p>

        </div>

      </div>
    </div>

  </div>
  <div class="col-md-4 mt-5 mb-5">
    <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
      <img src="https://siyahklasor.com/uploads/articles_images/articles_163/photo-3663910902.jpg" class="img-fluid rounded">
    </a>

    <div class="sq-category mb-3 mt-2">
      <span class="text-muted">Genel</span>
    </div>

    <div class="sq-title">
      <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
        <h2 class="sq-h2">Excelde en çok kullanılan formüller</h2>
      </a>
    </div>
    <div class="content-wrap">
      <div class="mt-3">
        <p>Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...Ticaret yapan herkesin rakamlarla arası
          iyi, hatta çok iyi olmalıdır. İş hayatımızda pozisyonumuz n...</p>
      </div>

      <div class="media mt-5 sq-profile">
        <a href="https://siyahklasor.com/profile" class="text-decoration-none">
          <img src="https://siyahklasor.com/assets/img/1596865798.png" class="avatar mr-3">
        </a>
        <div class="media-body">
          <p class="mt-1"><strong>Mehmet Sezenoğlu</strong> <br> 31 Ağustos 2020</p>

        </div>

      </div>
    </div>

  </div>
</div>

Align fields with CSS

1 Answers1