Semantic UI : 如何在列的底部放置一个按钮？

Question

这是一个非常简单的问题，但经过一些研究，我找不到正确的方法：我有一个包含 3 列的语义网格 UI，每列的内容都有一个特定的高度。我尝试在每一列的底部添加一个按钮，但 "bottom aligned" 不起作用。有人有线索吗？这是一个例子：

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

Semantic UI : 如何在列的底部放置一个按钮？

Semantic UI : how to place an button at the bottom of a column?

html

css

semantic-ui