我如何在CSS中缩短border-left高度属性

Question

我制作了一个简单的地址面板，其中我制作了三个面板，每个面板由地址，电话号码和电子邮件组成，每个面板由一个图标和一个段落组成。我使用了垂直align：top和display table属性将它们并排对齐。然后我给主div赋予了一个border-left属性，该属性包含其中的所有div。我想要一种设计使得该行应通过图标并且不超过顶部和底部图标。但是问题出在这里，主要由所有这些图标组成，并且有一些填充和边距，因此即使我删除了边距和填充，它也会越过并且无法修复它。我想设计一个这样，图标就不应超过顶部和底部图标。如果有人建议使用position属性，请紧记我在另一个col-md-6内部有一个div，其位置是绝对的。

这是HTML部分：-

<div class="row">
                <div class="col-md-6 col-sm-12">
                    <h2 class="heading-title">Drop in our office</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <div class="address-top">
                        <div class="address-repeat">
                            <div class="address-left">
                                <div class="body-widget">
                                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="address-right">
                                <div class="body-widget">
                                    <label>ADDRESS</label>
                                    <p>Huatai Securities (USA)10 Hudson Yards 41FlNY, NY 10001</p>
                                </div>
                            </div>
                        </div>
                        <div class="address-repeat">
                            <div class="address-left">
                                <div class="body-widget">
                                    <i class="fa fa-phone" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="address-right">
                                <div class="body-widget">
                                    <label>LETS TALK</label>
                                    <p>212-763-8166</p>
                                </div>
                            </div>
                        </div>
                        <div class="address-repeat">
                            <div class="address-left">
                                <div class="body-widget">
                                    <i class="fa fa-envelope" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="address-right">
                                <div class="body-widget">
                                    <label>GENERAL SUPPORT</label>
                                    <p>boardoffice@htsc.com</p>
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>

这是CSS部分：-

.address-left, .address-right{
    vertical-align: top;
    height: 100%;
    display: table-cell;
}
.address-left{
    width:50px;
    box-sizing: border-box;
    padding: 20px 0 0 0;
}
.address-right{
    width: 200px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 25px 0 0 0;
}
.address-repeat{
    width: 100%;
    margin: 20px 0 0 -12px;
}

.address-top{
    width: 100%;
    border-left:2px solid #d5d5d5;
    margin: 20px 0 0 10px;
}

#contact-us .address-right p{
    color:#5e5e5e;
    font-family: 'Montserrat-Regular';
    padding: 0;
    margin: 0;
    letter-spacing: 0.5px;
    font-size:14px;
    width:200px;
    font-weight: lighter;
}
#contact-us label{
    font-family: 'HelveticaNeueLTStd-HvCn';
    font-size:17px;
    color:#343434;
}
#contact-us i{
    color:#ffffff;
    font-size: 15px;
    border-radius:50%;
    width:25px;
    height:25px;
    line-height:23px;
    padding:1px 0 0 6px;
    background-color:#e70020;
}

Answer 1

您可以使用::before伪元素来代替左边框，例如：

.address-left, .address-right{
    vertical-align: top;
    height: 100%;
    display: table-cell;
}
.address-left{
    width:50px;
    box-sizing: border-box;
    padding: 20px 0 0 0;
}
.address-right{
    width: 200px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 25px 0 0 0;
}
.address-repeat{
    width: 100%;
    margin: 20px 0 0 -12px;
}

.address-top{
    width: 100%;
    margin: 20px 0 0 10px;
    position:relative;
}

.address-top::before {
  position: absolute;
  left: 0;
  top: 25px;
  height: calc(100% - 50px);
  width: 2px;
  content: '';
  background-color: #d5d5d5;
  z-index: -1;
}

#contact-us .address-right p{
    color:#5e5e5e;
    font-family: 'Montserrat-Regular';
    padding: 0;
    margin: 0;
    letter-spacing: 0.5px;
    font-size:14px;
    width:200px;
    font-weight: lighter;
}
#contact-us label{
    font-family: 'HelveticaNeueLTStd-HvCn';
    font-size:17px;
    color:#343434;
}
#contact-us i{
    color:#ffffff;
    font-size: 15px;
    border-radius:50%;
    width:25px;
    height:25px;
    line-height:23px;
    padding:1px 0 0 6px;
    background-color:#e70020;
}

<div class="row">
  <div class="col-md-6 col-sm-12">
    <h2 class="heading-title">Drop in our office</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <div class="address-top">
      <div class="address-repeat">
        <div class="address-left">
          <div class="body-widget">
            <i class="fa fa-map-marker" aria-hidden="true"></i>
          </div>
        </div>
        <div class="address-right">
          <div class="body-widget">
            <label>ADDRESS</label>
            <p>Huatai Securities (USA)10 Hudson Yards 41FlNY, NY 10001</p>
          </div>
        </div>
      </div>
      <div class="address-repeat">
        <div class="address-left">
          <div class="body-widget">
            <i class="fa fa-phone" aria-hidden="true"></i>
          </div>
        </div>
        <div class="address-right">
          <div class="body-widget">
            <label>LETS TALK</label>
            <p>212-763-8166</p>
          </div>
        </div>
      </div>
      <div class="address-repeat">
        <div class="address-left">
          <div class="body-widget">
            <i class="fa fa-envelope" aria-hidden="true"></i>
          </div>
        </div>
        <div class="address-right">
          <div class="body-widget">
            <label>GENERAL SUPPORT</label>
            <p>boardoffice@htsc.com</p>
          </div>
        </div>
      </div>
    </div>  
  </div>
</div>