Question

这是一个非常简单的问题，但经过一些研究，我找不到合适的方法：我在Semantic UI中有一个包含3列的网格，每列的内容都有一个特定的高度。我尝试在每列的底部添加一个按钮，但是＆＃34;底部对齐＆＃34;不起作用。有人有线索吗？这是一个例子：

<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

一种方法是在列中使用弹性框来定位内容和.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;
}

语义UI：如何在列的底部放置按钮？

1 个答案: