Question

请在此处查看我的codepen：http://codepen.io/Chiz/pen/oLpGOB

看起来很好，直到你调整窗口大小并缩小浏览器窗口的宽度，然后第一张卡的位置比3张卡的其余部分高！是什么导致这种情况以及如何解决？

韩国社交协会！

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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

只需为卡类添加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;}

CSS：当调整窗口大小时，其中一个DIV定位得更高

6 个答案: