将元素对齐到HTML表格的底部单元格

我在HTML表格的单元格中有多个元素。我想要将一些元素对齐到单元格的底部，并将一些元素对齐到顶部。我无法使元素与底部对齐。我的表是：将元素对齐到HTML表格的底部单元格

<tr> 
     <td style="background-color: #007CE2"> 
      <p id="t1_list">test<br>another<br>testing</p> 
      <input type="text" name="t1_input" id="t1_input"> 
      <button> 
       Add 
      </button> 
     </td> 
     <td style="background-color: #E54040"> 
      <p id="t2_list"></p> 
      <div class="value_input2"> 
       <input type="text" name="t2_input" id="t2_input"> 
       <button> 
        Add 
       </button> 
      </div> 
     </td> 
    </tr>

但是div内的元素似乎想要保持居中而不是位于底部。到目前为止，我已经尝试了两种不同的方法：使用CSS：

div.value_input { 
    position: absolute; 
    bottom: 0; 
}

它只是将div放到页面的底部。并且：

div.value_input2 { 
    display: table-cell; 
    vertical-align: bottom; 
}

哪个没有效果。

我这里的代码JSFiddle

什么我需要做的就是输入框和按钮对齐到单元格的底部？

来源

2017-03-03 Pottsiex5

您需要的父元素位置设置为相对position:relative为了使用绝对定位。这是一个工作片段。

table { 
 
    \t \t border-collapse: collapse; 
 
\t \t } 
 

 
\t \t table, th, td { 
 
\t \t  border: 2px solid black; 
 
     position:relative; 
 
\t \t } 
 

 
\t \t div.value_input { 
 
\t \t \t position: absolute; 
 
     bottom: 0; 
 
\t \t } 
 
    
 
    div.value_input2 { 
 
     position:absolute; 
 
     bottom:0; 
 
    }

<table> 
 
\t \t <tr> 
 
\t \t \t <th style="background-color: #007CE2"> 
 
\t \t \t \t Test 
 
\t \t \t </th> 
 
\t \t \t <th style="background-color: #E54040"> 
 
\t \t \t \t Test 
 
\t \t \t </th> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color: #007CE2"> 
 
\t \t \t \t <p id="t1_list">test<br>another<br>testing</p> 
 
\t \t \t \t <input type="text" name="t1_input" id="t1_input"> 
 
\t \t \t \t <button> 
 
\t \t \t \t \t Add 
 
\t \t \t \t </button> 
 
\t \t \t </td> 
 
\t \t \t <td style="background-color: #E54040"> 
 
\t \t \t \t <p id="t2_list"></p> 
 
\t \t \t \t <div class="value_input2"> 
 
\t \t \t \t \t <input type="text" name="t2_input" id="t2_input"> 
 
\t \t \t \t \t <button> 
 
\t \t \t \t \t \t Add 
 
\t \t \t \t \t </button> 
 
\t \t \t \t </div> 
 
\t \t \t </td> 
 
\t \t </tr> 
 

 
\t \t <tr> 
 
\t \t \t <th style="background-color: #8BC34A"> 
 
\t \t \t \t Test 
 
\t \t \t </th> 
 
\t \t \t <th style="background-color: #FF9800"> 
 
\t \t \t \t Test 
 
\t \t \t </th> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color: #8BC34A"> 
 
\t \t \t \t <p id="t3_list"></p> 
 
\t \t \t \t <input type="text" name="t3_input" id="t3_input"> 
 
\t \t \t \t <button> 
 
\t \t \t \t \t Add 
 
\t \t \t \t </button> 
 
\t \t \t </td> 
 
\t \t \t <td style="background-color: #FF9800"> 
 
\t \t \t \t <p id="t4_list"></p> 
 
\t \t \t \t <input type="text" name="t4_input" id="t4_input"> 
 
\t \t \t \t <button> 
 
\t \t \t \t \t Add 
 
\t \t \t \t </button> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table>

来源

2017-03-03 12:46:08

制作的表格单元格的位置是：相对的，那么你可以尝试的位置是：绝对的再次股利...

table tr td { 
    position: relative; 
} 

div.value_input2 { 
    position: absolute; 
    bottom: 0; 
}

fiddle

来源

2017-03-03 12:43:08 sol

你需要height:somepx垂直对齐这个工作。

来源

2017-03-03 13:32:54

将元素对齐到HTML表格的底部单元格

回答

相关问题