Блог

Я хочу сделать обзор команды для компании. Такие данные, как имя, должность и информация, извлекаются из базы данных. Информация имеет разную длину, и поэтому значки расположены не в одной строке

Кто — нибудь знает, как я могу получить одинаковое расстояние для значков от нижней части рамки?

HTML: (Речь идет о div под названием testusus)

             @foreach ($employees as $employee)
                <div class="col-sm-4">
                    <div class="float-box float-box-no-border-white about-team text-center tes">
                        <div class="hvrbox">
                            <a href="{{ action('WorkerController@show', $employee) }}"><img
                                        src="{{ $employee->profile_picture_url }}" class="img-team">
                                <div class="hvrbox-layer_top">
                                    <div class="hvrbox-text">Erfahre mehr über mich</div>
                                </div>
                            </a>
                        </div>
                        <h3>{{ $employee->first_name }} {{ $employee->last_name }}<br>
                            <hr class="hr-team">
                            <small>{{ $employee->position }}</small>
                        </h3>

                        <p class="p-text">{{ $employee->main_info }}</p>
                    </div>
                    

                    <div class="testusus">
                        <a href="mailto:{{ $employee->email_company }}"><i
                                    class="icon-envelope icon-share-small"></i></a>
                        @isset($employee->linkedin)
                            <a href="{{ $employee->linkedin }}" target="_blank"><i
                                        class="icon-linkedin icon-share-small"></i></a>
                        @endisset
                    </div>


                </div>
            @endforeach
 

CSS:

 .testusus {
  text-align: center;
  position: relative;
  bottom: 0;
}
 

Вы можете сделать свои коробки flex , а затем использовать margin-top: auto; их на нижних частях:

 #container { display: flex; }

.box {
  border: 2px solid red;
  width: 200px;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.bottom {
  margin-top: auto;
  padding: 15px;
  background-color: yellow;
} 

 <div id="container">
  <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <div class="bottom">
      Bottom
    </div>
  </div>

  <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    <div class="bottom">
      Bottom
    </div>
  </div>
</div>