将div放在div上方，底部垂直对齐

Question

这是我的示例HTML代码：

.questions-table-main {
        border-right: 3px solid rgb(242,244,247);
        width:189px;
        float:left;
        padding-right:30px;
        padding-top:10px;
        display:table;
        height: 200px;
    }
    .questions-table-main-category {
        /* padding-top: 20px; */
        text-align : center;
    }
    .questions-table-main-firm {
        height:85px;
        background-color:rgb(242,244,247);
        text-align: center;
        display: table-row;
        vertical-align: bottom;
    }

<div class="questions-table-main">
       <div class="questions-table-main-category">
          <img src="img/communication.png" alt="communication"/>
       </div>
       <div class="questions-table-main-firm">
          <div class="questions-table-main-firm-image">
             <span class="questions-table-firm-helper">
             <img src="img/allianz.png" alt="allianz" /></span>
          </div>
       </div>
    </div>

    

让我清楚这个烂摊子。我需要将<div class="questions-table-main-firm">放在<div class="questions-table-main">的底部。接下来我需要做的是<div class="questions-table-main-category">必须高于<div class="questions-table-main-firm">，它们之间的间隔为27px。我试图用padding-top做到这一点，但这是不可能的，因为我有一些不同尺寸的不同图像。现在<div class="questions-table-main-category">位于parrent div的顶部。如何解决？

Answer 1

您可以使用position: absolute;和top来完成此操作。对于底部div，请使用top: 0，以便在顶部和第一个div处使用top: 112px，包括高度（85）和边距27.

.questions-table-main {
  border-right: 3px solid rgb(242,244,247);
  width:189px;
  padding-right:30px;
  padding-top:10px;
  display:block;
  height: 200px;
  position: relative;
 
}
.questions-table-main-category {
  text-align : center;
  height:85px;
  top: 112px; /* height 85 + 27 margin*/
  position: absolute;
}
.questions-table-main-firm {
  height:85px;
  background-color:rgb(242,244,247);
  text-align: center;
  top: 0px;
  position: absolute;
}

   <div class="questions-table-main-category">
      <img src="https://placehold.it/189x85" alt="communication"/>
   </div>
   <div class="questions-table-main-firm">
      <div class="questions-table-main-firm-image">
   
         <span class="questions-table-firm-helper">
         <img src="https://placehold.it/189x85" alt="allianz" /></span>
      </div>
   </div>
</div>

Answer 2

您需要删除显示表属性，按以下步骤操作：

＆＃13;

＆＃13;

.questions-table-main {
    width:189px;
    float:left;
    padding-right:30px;
    padding-top:10px;
    height: 200px;
}
.questions-table-main-category {
    /* padding-top: 20px; */
    text-align : center;
    margin-bottom: 27px;
}
.questions-table-main-firm {
    background-color:rgb(242,244,247);
    text-align: center;
    vertical-align: bottom;
}

＆＃13;

<div class="questions-table-main">
   <div class="questions-table-main-category">
      <img src="http://placehold.it/350x150" alt="communication"/>
   </div>
   <div class="questions-table-main-firm">
      <div class="questions-table-main-firm-image">
         <span class="questions-table-firm-helper">
         <img src="http://placehold.it/350x150" alt="allianz" /></span>
      </div>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;