CSS：调整窗口大小时，其中一个 DIV 的位置更高

Question

请在此处查看我的代码笔：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;
}

Answer 2

另一个最佳解决方案是您可以将卡片平铺成全宽，我已在演示中展示过。 （用于响应模式）

响应式 CSS：

@media only screen and (max-width: 800px) { 

/*** You can change the responsive screen size as per your requirement.

    .Card {
      width: 100%;
      margin-bottom: 20px;  
     }
 }

完整演示：

* {
  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;
}
@media only screen and (max-width: 800px) {	
	.Card {
		width: 100%;
		margin-bottom: 20px;	
	}
}

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

只需为 Card 类添加 vertical-align: top;。

Answer 4

您的布局在大屏幕上看起来不错这就是为什么您只需要为小型设备编写此代码，因此您可以尝试以下代码。

---

@media (max-width: 768px){ 
  .CardContainer .Card{
    float: left;
  }
}

Answer 5

您需要将vertical-align:top; 添加到.Card。

因为你用过display:inline-block所以默认是vertical-align:baseline;

并且它将元素的基线与父元素的基线对齐。

Your updated Codepen

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

Answer 6

我认为这可以完成工作：

.CardContainer .card {vertical-align:top;}