Question

我正在尝试进行如下布局：

Here is what i tried doing to achieve same

我不知道如何在引导程序中将蓝色圆圈与圆形图像对齐并将文本放在行顶部。虚线上方的“您的客户”。

Answer 1

我使用伪元素来实现它。请参考下面的链接。谢谢

https://codepen.io/Xenio/pen/xMLLdL 999

Answer 2

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  font-family: lato;
}
.section-header, .steps-header, .steps-name {
  color: #3498db;
  font-weight: 400;
  font-size: 1.4em;
}
.steps-header {
  margin-bottom: 20px;
  text-align: center;
}
.steps-timeline {
  outline: 1px dashed rgba(255, 0, 0, 0);
}
.step-box {
    position: relative;
}
.border-info {
    position: absolute;
    top: -12px;
    right: -41%;
}
@media screen and (max-width: 500px) {
  .steps-timeline {
    border-left: 2px solid #3498db;
    margin-left: 25px;
  }
}
@media screen and (min-width: 500px) {
  .steps-timeline {
    border-top: 2px solid #3498db;
    padding-top: 20px;
    margin-top: 40px;
    margin-left: 16.65%;
    margin-right: 16.65%;
  }
}
.steps-timeline:after {
  content: "";
  display: table;
  clear: both;
}
.steps-one, .steps-two, .steps-three {
  outline: 1px dashed rgba(0, 128, 0, 0);
}
@media screen and (max-width: 500px) {
  .steps-one, .steps-two, .steps-three {
    margin-left: -25px;
  }
}
@media screen and (min-width: 500px) {
  .steps-one, .steps-two, .steps-three {
    float: left;
    width: 33%;
    margin-top: -50px;
  }
}
@media screen and (max-width: 500px) {
  .steps-one, .steps-two {
    padding-bottom: 40px;
  }
}
@media screen and (min-width: 500px) {
  .steps-one {
    margin-left: -16.65%;
    margin-right: 16.65%;
  }
}
@media screen and (max-width: 500px) {
  .steps-three {
    margin-bottom: -100%;
  }
}
@media screen and (min-width: 500px) {
  .steps-three {
    margin-left: 16.65%;
    margin-right: -16.65%;
  }
}
.steps-img {
  display: block;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #3498db;
}
@media screen and (max-width: 500px) {
  .steps-img {
    float: left;
    margin-right: 20px;
  }
}
.steps-name, .steps-description {
  margin: 0;
}
@media screen and (min-width: 500px) {
  .steps-name {
    text-align: center;
  }
}
.steps-description {
  overflow: hidden;
}
@media screen and (min-width: 500px) {
  .steps-description {
    text-align: center;
  }
}

  <!-- STEPS -->
  <section id="Steps" class="steps-section">

    
        <div class="steps-timeline">
    
          <div class="steps-one step-box">
            <img class="steps-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyznUM3fo7JW5RskOyxZqC0sGMtn6AdNB8Y3lVey8cdfl0ZnmW" alt="" />
            <h3 class="steps-name">
              John Doe
            </h3>
            <p class="steps-description">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
            </p>
            <div class="border-info">
                <p>Your Customer</p>
            </div>
          </div>
    
          <div class="steps-two step-box">
            <img class="steps-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyznUM3fo7JW5RskOyxZqC0sGMtn6AdNB8Y3lVey8cdfl0ZnmW" alt="" />
            <h3 class="steps-name">
                    John Doe
            </h3>
            <p class="steps-description">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
            </p>
            <div class="border-info">
                    <p>Your Customer</p>
                </div>
          </div>
    
          <div class="steps-three step-box">
            <img class="steps-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyznUM3fo7JW5RskOyxZqC0sGMtn6AdNB8Y3lVey8cdfl0ZnmW" alt="" />
            <h3 class="steps-name">
                    John Doe
            </h3>
            <p class="steps-description">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
            </p>
          </div>
    
        </div><!-- /.steps-timeline -->
    
      </section>

Answer 3

尝试一下：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#dotted::after{
          content: "------------------------------";
          letter-spacing: 2px;
          color:#2518A5;
}
</style>

<div class="col mini-box ml-4" >
                  <div class="row" style="position: relative !important; width: 1000px;">
                    <div style="display: inline">
                        <div id="dotted"><img class="rounded pull-right" src="assets/ic_AvatarMale_2.svg" width="85" height="85"></img>
                        </div>  
                        <div class="mt-2 text-left"><h6 style="font-weight: 700; color: #2518A5 ">John Doe (You)</h6>
                        <h6>Founder</h6>
                        <h6>ESOP International</h6>
                        </div>
                    </div>
                  <span style="text-align: center; font-size:10pt;position: absolute; right:750px; top: 10px; display: inline-block">Your Company</span>
    <span style="position: absolute;text-align: center; font-size:10pt; right:370px; display: inline-block">Nathan was co founder &  <br/>COO at HotelsByDay</span>
                <div style="display: inline-block">
                        <div id="dotted"><img class="rounded pull-right" src="assets/ic_AvatarMale_1.svg" width="85" height="85"></img>
                        </div>   
                        
                        <div class="mt-2 "><h6 style="font-weight: 700; color: #2518A5 ">Paul Ironside</h6>
                          <h6>Co-founder and CEO</h6>
                          <h6>Commercial Tribe</h6>
                        </div>
                    </div>
                    <img class="rounded pull-right" src="assets/ic_AvatarMale_1.svg" width="85" height="85">
                </div>
              </div>

带线引导的圆形图像

3 个答案: