时间戳

首页 > 解决方案 > 如何并排制作个人资料卡？

html - 如何并排制作个人资料卡？

问题描述

所以我想为我目前正在开发的网站制作个人资料卡。这是我到目前为止所拥有的：

.con{
  position: relative;
  height: 500px;
  width: 550px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  transition: 0.3s ease-out;
}
.con:hover{
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: transform 0.3s ease-out;
}
.con:hover .image{
  transform: translateY(-100px);
}
.image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-out;
}
.con:hover .image img{
  opacity: 0.7;
}
.con:hover .image{
 transform: translateY(-100px);
}

.con:hover > ul > li > a{
  opacity: 1;
  transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
  transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
  transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
  transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
  transition-delay: 0.4s;
}
.con .content{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
.info{
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #000;
  line-height: 26px;
}
.info h2{
  font-size: 27px;
  margin: 3px 0;
}
.info span{
  color: #1a1a1a;
}
.ul2{
  display: flex;

}
.ul2 li{
  display: flex;
 align-items:center;
 justify-content:center;
  position: relative;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 15px;
  cursor: pointer;
  transition: .5s;
}
.ul2 li:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;
}
.ul2 li:nth-child(1):before{
  background: #4267B2;
}
.ul2 li:nth-child(2):before{
  background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
  background: #E1306C;
}
.ul2 li:nth-child(4):before{
  background: #2867B2;
}
.ul2 li:nth-child(5):before{
  background: #ff0000;
}
.ul2 li:hover:before{
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
  box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}
<div class="con">
      <div class="image">
        <img src="Images/blankprofile.png">
      </div>
<div class="content">
        <div class="info">
          <h2>
Name</h2>
<span>Student</span>
        </div>
</div>

</div>
        <ul class="ul2" >
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>

出于某种原因，徽标没有加载，但没关系。我想要做的是在我现有的个人资料卡旁边创建另一个个人资料卡。当我尝试这样做时，它会低于个人资料卡。我已经尝试创建一个单独的 div 样式为内联，要么我做错了，要么没有效果。有人可以帮我在我现有的旁边放置另一张个人资料卡吗？

标签： htmlcsscard

解决方案

.flex{
  display: flex;
}
.con{
  position: relative;
  height: 500px;
  width: 550px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  transition: 0.3s ease-out;
}
.con:hover{
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: transform 0.3s ease-out;
}
.con:hover .image{
  transform: translateY(-100px);
}
.image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-out;
}
.con:hover .image img{
  opacity: 0.7;
}
.con:hover .image{
 transform: translateY(-100px);
}

.con:hover > ul > li > a{
  opacity: 1;
  transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
  transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
  transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
  transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
  transition-delay: 0.4s;
}
.con .content{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
.info{
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #000;
  line-height: 26px;
}
.info h2{
  font-size: 27px;
  margin: 3px 0;
}
.info span{
  color: #1a1a1a;
}
.ul2{
  display: flex;

}
.ul2 li{
  display: flex;
 align-items:center;
 justify-content:center;
  position: relative;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 15px;
  cursor: pointer;
  transition: .5s;
}
.ul2 li:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;
}
.ul2 li:nth-child(1):before{
  background: #4267B2;
}
.ul2 li:nth-child(2):before{
  background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
  background: #E1306C;
}
.ul2 li:nth-child(4):before{
  background: #2867B2;
}
.ul2 li:nth-child(5):before{
  background: #ff0000;
}
.ul2 li:hover:before{
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
  box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}
<div class="flex">
<div class="con">
  <div class="image">
    <img src="Images/blankprofile.png">
  </div>
  <div class="content">
    <div class="info">
      <h2>
        Name</h2>
      <span>Student</span>
    </div>
  </div>
</div>
<div class="con">
  <div class="image">
    <img src="Images/blankprofile.png">
  </div>
  <div class="content">
    <div class="info">
      <h2>
        Name</h2>
      <span>Student</span>
    </div>
  </div>
</div>
</div>
<ul class="ul2">
  <li><i class="fab fa-facebook-f"></i></li>
  <li><i class="fab fa-twitter"></i></li>
  <li><i class="fab fa-instagram"></i></li>
  <li><i class="fab fa-linkedin-in"></i></li>
  <li><i class="fab fa-youtube"></i></li>
</ul>

添加一个包装容器并将其设置为display: flex应该可以工作。

https://jsfiddle.net/mownfLz9/

推荐阅读