在顯示中對齊底部嵌套的項目：表

Question

假設我獲得了一個包含3個項目的行（爲簡化起見，CSS內部爲樣式標記）。

<div style="display:table"> 
    <div style="display:table-cell"> 
     <span>Some text</span> 
     <button type="button">Some button</button> 
    </div> 
    <div style="display:table-cell"> 
     <span>Some Other text</span> 
     <button type="button">Some button</button> 
    </div> 
    <div style="display:table-cell"> 
     <span>Long Long Long Long Long Long Long text </span> 
     <button type="button">Some button</button> 
    </div> 
</div> 

如何更改該問題，即所有三個按鈕將在同一行中，無論文本長度如何？ 現在文本不相同，然後按鈕不在同一行。

Answer 1

忽略樣式（這是不存在的）。

您需要添加一行來分隔內容。

https://jsfiddle.net/yoxer670/

<div style="display:table"> 
    <div style="display: table-row"> 
    <div style="display:table-cell" class="tableCell"> 
     <span>Some text</span> 
    </div> 
    <div style="display:table-cell" class="tableCell"> 
     <span>Some Other text</span> 
    </div> 
    <div style="display:table-cell" class="tableCell"> 
     <span>Long Long Long Long Long Long Long text </span> 
    </div> 
    </div> 
    <div style="display: table-row"> 
    <div style="display:table-cell" class="tableCell"> 
     <button type="button">Some button</button> 
    </div> 
    <div style="display:table-cell" class="tableCell"> 
     <button type="button">Some button</button> 
    </div> 
    <div style="display:table-cell" class="tableCell"> 
     <button type="button">Some button</button> 
    </div> 
    </div> 
</div> 

Answer 2

如果你不想更改HTML代碼，您只能使用css樣式。 我將.cell類添加到表格單元格中。

.cell { 
    position: relative; 
    padding-bottom: 30px; 
} 

.cell button { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}