使用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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

获取codepen.io帐户＆gt;搜索“名片”，然后根据另一个人的笔创建类似的东西。您可以通过这种方式了解您通常不会了解的其他方法。

至于这个，我可能会做一个像500px

这样的DIV

这张照片占据了div的50％ 然后相应地格式化文本

Answer 3

当我们输入名字时，我们在第一个，中间名和姓氏之间加上空格。假设这些都不是很长，我们可以通过将'align-items'与'text-align'交换来简化代码的工作。

HTML：

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

CSS：

 .business-card {
  position: relative;
  border: 1px solid black;
  width: 200px;
}

.business-card section {
  display: flex;
  flex-flow: column;
  text-align: center;
}

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

如果这可以解决您的问题，请告诉我。

Answer 4

检查以下片段...让我知道

.business-card{
   position:relative;
   border:1px solid black;
  width:800px;
  height: 400px;
}
.business-card section {
  display:flex; 
  flex-flow:column;
  align-items:center;
}
.email{
  position:absolute;
  right:0;
}

#textbox p{
  display: inline-block;
  width:31%!important;
  vertical-align:top;
  text-align:left;
  padding:0px 5px;
}

<div class="business-card">
  
  <section>
      <span>
          <img style="height: 200px; width: 400px; align-items:center;" src="http://www.underconsideration.com/brandnew/archives/google_2015_logo_detail.png"/>
    </span>
  </section>
  
  <div id="textbox">
  
  <p>Text on the left.Text on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the left</p>
    <p>Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.</p>
  <p>Text on the right.</p>
  </div>
  <br>
  <br>
  
  <div style="clear: both;"></div><!-- Fixes float issues -->
  
</div>