語義UI：如何在列的底部放置一個按鈕？

Question

這是一個非常簡單的問題，但經過一番研究後，我無法找到正確的方法：我在Semantic UI中有3列的網格，每列的內容都有特定的高度。我嘗試在每列的底部添加一個按鈕，但「底部對齊」不起作用。 有人有線索嗎？ 這裏是一個例子：

<div class="ui basic segment"> 
    <div class="ui divided grid container"> 
    <div class="three column row"> 
     <div class="column"> 
     Hello <br> 
     fdsfsd <br> 
     fsfsd <br> 
     fdsfsd <br> 
     fsfsd <br> 
     fsfsd <br> 
     fdsfsd <br> 
     fsfsd <br> 
     fs 
     </div> 
     <div class="column"> 
     <div class="segments"> 
      <div class="ui segment">Hello</div> 
      <div class="ui bottom aligned segment"> 
      fdsfsdf 
      </div> 
     </div> 
     </div> 
     <div class="column"> 
     Hello 
     </div> 
    </div> 
    </div> 
</div> 

感謝您的幫助！去它

Answer 1

一種方法是使用Flexbox的柱子裏面的內容和.ui.segment DIV位置

JS小提琴：https://jsfiddle.net/batrasoe/vq84trys/4/

<div class="ui segment"> 
    <div class="ui divided grid container"> 
    <div class="three column stretched row"> 
     <div class="column"> 
     <div class="segment-wrapper"> 
      <div class="content"> 

      </div> 
      <div class="ui bottom segment"> 
      </div> 
     </div> 
     </div> 
     <div class="column"> 
     <div class="segment-wrapper"> 
      <div class="content"> 

      </div> 
      <div class="ui bottom segment"> 
      </div> 
     </div> 
     </div> 

     <div class="column"> 
     <div class="segment-wrapper"> 
      <div class="content"> 

      </div> 
      <div class="ui bottom segment"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

和CSS：

.segment-wrapper { 
    background-color: #DDD; 
    display: flex; 
    flex-direction: column; 
} 

.content { 
    flex: 1; 
    background-color: skyblue; 
} 

.ui.bottom.segment { 
    margin-top: 0; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
}