下のネストされたアイテムをディスプレイに並べ替えます。

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> 

どのようにテキストの長さに関係なく、3つのボタンがすべて同じ行にあるという問題を変更できますか？ テキストが等しくないし、ボタンが同じ行にない。

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