Schwierigkeit beim Entwerfen einer Visitenkarte über CSS

-4

Ich möchte eine Visitenkarte über HTML und CSS erstellen. Es folgt das Design:Schwierigkeit beim Entwerfen einer Visitenkarte über CSS

folgende ist mein Code:

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

Aus dem obigen Code, ich bin die Telefonnummern, E-Mail-Adresse nicht in der Lage zu positionieren und Büroadresse an der richtigen Stelle, wo ich will. Kein Bedarf an Hilfe für Hintergrundbilder. Ich brauche nur Hilfe beim Aufbau des CSS-Teils. Könnte jemand bitte helfen. Danke im Voraus.

Quelle

2017-03-06 user1613245

Was ist Ihre Frage? Du hast es nicht formuliert. –

Sir, ich möchte Hilfe nur in CSS-Teil – user1613245

Hilfe, was zu tun? Was funktioniert nicht wie erwartet? –

Alles ist möglich;) Gib mir ein Plus;)

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

Quelle

2017-03-06 07:48:45

Vielen Dank. Dies ist getan – user1613245

Sir, Telefonnummern sind nicht genau auf der rechten Seite. Was ist die Veränderung dafür? – user1613245

Ich habe das getan, indem ich text-align: right; . Es funktionierte – user1613245

Ich weiß nicht, ob das helfen würde? Ich bin kein Profi, wenn ich falsch mit diesem Code bin. 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>

Quelle

2017-03-06 07:41:08

Sir, danke. Es funktioniert. Aber ist es möglich, die Telefonnummern und den E-Mail-Bereich genau oben rechts auf der Karte zu positionieren? Außerdem kommt die E-Mail-Adresse aus der Karte. Alles kann dafür getan werden? – user1613245

Schwierigkeit beim Entwerfen einer Visitenkarte über CSS

Antwort

Verwandte Themen