javascript - CSS : One of the DIVs gets positioned higher when window is resized

Question

请在这里查看我的codepen:http://codepen.io/Chiz/pen/oLpGOB

它看起来不错，直到您调整窗口大小并减小浏览器窗口的宽度，然后第一张卡片的位置变得比其余 3 张卡片高!是什么原因造成的，我该如何解决？

谢谢!

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  font-family: "Open Sans";
}

.header {
  background-color: #1b9ef2;
  width: 100%;
  height: 20rem;
}

.header h1 {
  color: white;
  font-size: 1.5rem;
  line-height: 15rem;
  text-align: center;
}

.CardContainer {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  margin-top: -6rem;
}

.Card {
  display: inline-block;
  width: 20%;
  height: 30rem;
  margin: 0 1rem 0 1rem;
  padding: 0rem;
  background-color: rgb(250, 250, 250);
  border: 1px solid black;
  border-radius: 10px;
  position:relative;
}

.Card h2 {
  color: #1b9ef2;
  font-size: 1.2rem;
  font-weight: 600;
  padding:2.5rem;
}

.cardimgcontainer
{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.Card img
{
  width:80%;
  height:40%;
  max-height:180px;
  text-align:center;
}

.Card .Price
{
  position:absolute;
  bottom:0;
  width:100%;
  padding:2.5rem;
  line-height:1.5rem;
  color:rgb(70,70,70);
}

.Card .Price .bold
{
  font-weight:800;
  font-size:1.4rem;
}

<div class="header">
  <h1>Choose your subscription plan</h1>
</div>

<div class="CardContainer">
  <div class="Card">
    <h2>2 Days Trial</h2>
    <div class="cardimgcontainer">
      <img src="https://s-media-cache-ak0.pinimg.com/originals/0d/e6/b3/0de6b34699563781365b286c45359692.jpg" />
    </div>
    <div class="Price"><span class="bold">$9.99</span><br />1 account</div>
  </div>
  <div class="Card">
    <h2>Personal</h2>
    <div class="cardimgcontainer">
      <img src="http://static.vecteezy.com/system/resources/previews/000/090/876/original/rolling-hills-landscape-vector.jpg" />
    </div>
    <div class="Price"><span class="bold">$29.99</span><br />5 accounts</div>
  </div>
  <div class="Card">
    <h2>Advanced</h2>
    <div class="cardimgcontainer">
      <img src="https://d13yacurqjgara.cloudfront.net/users/968424/screenshots/2287311/2015_10_12_flatlandscape_800x600_v01_1x.jpg" />
    </div>
    <div class="Price"><span class="bold">$39.99</span><br />10 accounts</div>
  </div>
  <div class="Card">
    <h2>Business</h2>
    <div class="cardimgcontainer">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/18/fe/3f/18fe3f54a4ae949f7993442a9d8a3447.jpg" />
    </div>
    <div class="Price"><span class="bold">$49.99</span><br />50 accounts</div>
  </div>
</div>

Answer 1

使用vertical-align: top;

.Card {
    display: inline-block;
    width: 20%;
    height: 30rem;
    margin: 0 1rem 0 1rem;
    padding: 0rem;
    background-color: rgb(250, 250, 250);
    border: 1px solid black;
    border-radius: 10px;
    position: relative;
      vertical-align: top;
}