html - 使用CSS设计名片的难度

Question

我正在尝试制作一张名片 名字和头衔在中间，电子邮件和电话在卡片的最左边和最右边

下面是我的代码

.business-card{
   position:relative;
   border:1px solid black;
  width:200px;
}
.business-card section {
  display:flex;
  flex-flow:column;
  align-items:center;
}


.email{
  position:absolute;
  right:0;
}

<div class="business-card">
  <section>
      <span>
          name:abc
    </span>
    <span>
        title:xyz
    </span>
  </section>
 <footer>
   <span class="phone">
       123-123-123
   </span>
     <span class="email">
       abc@abc.com
   </span>
  </footer>
</div>
 

我正在尝试包装名称/标题，但它超出了 div。

.business-card{
   position:relative;
   border:1px solid black;
  width:200px;
}
.business-card section {
  display:flex;
  flex-flow:column;
  align-items:center;
  
}


.email{
  position:absolute;
  right:0;
}

<div class="business-card">
  <section>
      <span>
          name:abcsfsdfjsdflkjsdjflssfsdfds
    </span>
    <span>
        title:xyz
    </span>
  </section>
 <footer>
   <span class="phone">
       123-123-123
   </span>
     <span class="email">
       abc@abc.com
   </span>
  </footer>
</div>
 

有人可以帮忙吗 PS:附件是我要开发的名片的示例屏幕截图

Answer 1

.card {
  border: 1px solid lightgray;
}
.title {
  display: flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
  text-align: center;
  word-break: break-all;
}
.title > div {
  width: 50%;
}
.info {
  display: flex;
  padding: 2em;
}
.info > div {
  flex: 1;
}
.info > div:nth-child(2) {
  text-align: right;
}

<div class="card">
  <div class="title">
    <div>Name: eDesignary</div>
    <div>Title: Source code platform!</div>
  </div>
  <div class="info">
    <div>Hyderabad</div>
    <div>edesignary@gmail.com</div>
  </div>
</div>

如果您的问题解决了，请告诉我。