html - 语义用户界面 : how to place an button at the bottom of a column?

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