Css盒未正确显示在彼此旁边

Question

我制作了两个盒子，其中一个是数字，第二个是图像，用css表示。虽然一切都是一样的，但如果你注意到哪里出错了，为什么左边的盒子在底部看起来有点小？

.flex-container
/* to put boxes in a row */

{
  display: flex;
  flex-direction: row;
  position: relative;
  left: 30%;
}

.first {
  padding: 20px;
}

.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

.header
/* Calendar description */

{
  background-color: rgb(144, 204, 194);
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  padding: 10px;
  font-size: 50px;
  line-height: 20px;
  height: 210px;
}

.narrow
/* the narrow white band*/

{
  background-color: white;
  padding: 5px;
}

.text {
  color: rgb(223, 177, 26);
  font-family: Arial, Helvetica, sans-serif;
}

.text:hover {
  color: rgb(144, 204, 194);
}

.day
/* to specify the day style which is smaller */

{
  font-size: 20px;
}

<div class="flex-container">
  <div class="first">
    <div class="card">
      <div class="header">
        <h1>2</h1>
        <p class="day">Sat.</p>
      </div>
      <div Class="narrow" style="height:53px">
        <p class="text">May, 2018</p>
      </div>
    </div>
  </div>
  <div class="first">
    <div class="card">
      <div>
        <img src="https://media.cntraveler.com/photos/5ac3980ba90ec7611095c8ed/master/w_820,c_limit/GettyImages-637176190.jpg" alt="Paris" width="250" height="230">
      </div>

      <div Class="narrow">
        <p class="text">Where is here?</p>
      </div>
    </div>
  </div>
</div>

Answer 1

这是如何使用flexbox工作的。在行的情况下，子元素的高度对于每个元素都是相等的，但仅适用于直接子元素，而不适用于所有后代。

在您的情况下，解决此问题的最简单方法是删除类first的容器，并将具有类card的容器作为Flex容器的直接子容器。

Answer 2

我删除了高度：53px并将 display：flex 提供给.first

＆＃13;

＆＃13;

.flex-container
/* to put boxes in a row */

{
  display: flex;
  flex-direction: row;
  position: relative;
  left: 30%;
}

.first {
  padding: 20px;
  display: flex;
}

.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

.header
/* Calendar description */

{
  background-color: rgb(144, 204, 194);
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  padding: 10px;
  font-size: 50px;
  line-height: 20px;
  height: 210px;
}

.narrow
/* the narrow white band*/

{
  background-color: white;
  padding: 5px;
}

.text {
  color: rgb(223, 177, 26);
  font-family: Arial, Helvetica, sans-serif;
}

.text:hover {
  color: rgb(144, 204, 194);
}

.day
/* to specify the day style which is smaller */

{
  font-size: 20px;
}

＆＃13;

<div class="flex-container">
  <div class="first">
    <div class="card">
      <div class="header">
        <h1>2</h1>
        <p class="day">Sat.</p>
      </div>
      <div Class="narrow">
        <p class="text">May, 2018</p>
      </div>
    </div>
  </div>
  <div class="first">
    <div class="card">
      <div>
        <img src="https://media.cntraveler.com/photos/5ac3980ba90ec7611095c8ed/master/w_820,c_limit/GettyImages-637176190.jpg" alt="Paris" width="250" height="230">
      </div>

      <div Class="narrow">
        <p class="text">Where is here?</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;