Question

我想通过HTML和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>name@example.com</div>
      <div>Address</div>
    </div>
  </div>
</div>

从上面的代码中，我无法将电话号码，电子邮件地址和办公地址放在我想要的适当位置。无需帮助背景图像。我只需要帮助构建CSS部分。有谁可以帮忙。提前谢谢。

Answer 1

我不知道这会有帮助吗？我不是专业人士，如果我对这段代码有误，请更正。 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>name@example.com</div>
        </div>
        <div class="center">
            <div>Full Name</div>
            <div>Designation</div>
        </div> 
        <div class="info">
            <div>Address</div>
        </div>
    </div>
</div>

</body>
</html>

Answer 2

一切皆有可能;）给我一个加号;）

<!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>name@example.com</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>

通过CSS设计名片的难度

2 个答案: