时间戳

首页 > 解决方案 > 图标与边框的距离应始终相同

html - 图标与边框的距离应始终相同

问题描述

我想为一家公司做一个团队概述。从数据库中检索姓名、职务和信息等数据。信息长度不同，因此图标不在一行

在此处输入图像描述

有谁知道如何从边框底部获得图标的统一距离？

HTML：（关于名为 testusus 的 div）

            @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;
}

标签： htmlcsssass

解决方案

您可以制作盒子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>

推荐阅读