通過CSS設計名片的困難

-4

我想通過HTML和CSS創建名片。以下是設計：通過CSS設計名片的困難

以下是我的代碼：

.card { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
 
    transition: 0.3s; 
 
    width: 30%; 
 
} 
 

 
.card:hover { 
 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 
 
} 
 

 
.container { 
 
    padding: 50px 16px; 
 
} 
 

 
.center { 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.info>div:nth-child(2) { 
 
    text-align: right; 
 
    right: 0; 
 
} 
 

 
.number>div:nth-child(2) { 
 
    text-align: right; 
 
    right: 0; 
 
}

<div class="card"> 
 
    <div class="container"> 
 
    <div class="center"> 
 
     <div>Full Name</div> 
 
     <div>Designation</div> 
 
    </div> 
 

 
    <div class="number"> 
 
     <div>R:5435437435</div> 
 
     <div>O:7438573478</div> 
 
    </div> 
 
    <div class="info"> 
 
     <div>[email protected]</div> 
 
     <div>Address</div> 
 
    </div> 
 
    </div> 
 
</div>

從上面的代碼，我不能來定位電話號碼，電子郵件地址和辦公地址在我想要的地方。無需幫助背景圖像。我只需要幫助建立CSS部分。任何人都可以請幫忙。提前致謝。

來源

2017-03-06 user1613245

什麼是你的問題？你還沒有制定它。 –

先生，我只想在CSS部分幫忙 – user1613245

幫忙做什麼？什麼不按預期工作？ –

一切皆有可能;）給我加分;）

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.card { 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
    transition: 0.3s; 
    width: 30%; 
} 
.card:hover { 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 
} 
.container { 
    padding: 50px 16px; 
    position:relative; 
} 
.center { 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
} 
.info > div { 
    padding-top:10px; 
    text-align:center; 
} 
/* 
.number > div { 
    display: inline-block; 
    margin-left:70%; 
} 
*/ 
.number > .number_container { 
    position:absolute; 
    right:0; 
    top:0; 
} 
</style> 
</head> 
<body> 

<div class="card"> 
    <div class="container"> 
     <div class="number"> 
      <div class="number_container"> 
       <div>R:5435437435</div> 
       <div>O:7438573478</div> 
       <div>[email protected]</div> 
      </div> 
     </div> 
     <div class="center"> 
      <div>Full Name</div> 
      <div>Designation</div> 
     </div> 
     <div class="info"> 
      <div>Address</div> 
     </div> 
    </div> 
</div> 

</body> 
</html>

來源

2017-03-06 07:48:45

非常感謝。這是完成的 – user1613245

先生，電話號碼不完全在右邊。這需要什麼改變？ – user1613245

我這樣做是通過添加文本對齊：正確; 。有效 – user1613245

我不知道這是否有幫助？我不是專業人士，如果我對這段代碼有錯，請更正。 BR

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.card { 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
    transition: 0.3s; 
    width: 30%; 
} 
.card:hover { 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 
} 
.container { 
    padding: 50px 16px; 
    position:relative; 
} 
.center { 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
} 
.info > div { 
    padding-top:10px; 
    text-align:center; 
} 
.number > div { 
    display: inline-block; 
    margin-left:70%; 
} 
</style> 
</head> 
<body> 

<div class="card"> 
    <div class="container"> 
     <div class="number"> 
       <div>R:5435437435</div> 
       <div>O:7438573478</div> 
       <div>[email protected]</div> 
     </div> 
     <div class="center"> 
      <div>Full Name</div> 
      <div>Designation</div> 
     </div> 
     <div class="info"> 
      <div>Address</div> 
     </div> 
    </div> 
</div> 

</body> 
</html>

來源

2017-03-06 07:41:08

先生，謝謝。它的工作。但是，是否可以將電話號碼和電子郵件部分放在卡片右上角？此外，電子郵件地址是從卡中出來的。任何事情都可以做到這一點？ – user1613245

通過CSS設計名片的困難

回答

相關問題