将网格划分为3列

Question

我想创建如下图所示的内容

​

​

我有这个

<div class="ui page grid">
    <div class="ui segment">
        <div class="sixteen wide column">
            <a class="ui green circular label"></a>
            <h5>{{this.email}}{{this.totalTimeExpire}}</h5>
            <h6>{{this.timeRemaining}} remaining</h6>
        </div>
    </div>
</div>

我已经尝试使用sixteen wide column并将其划分为3个子列，但它就是不起作用。我的网格代码应该如何以相同的内联顺序放置所有3列(绿色圆圈、用户名和剩余时间计数)？

Answer 1

我不确定为什么要使用Segment元素，但以下是解决方案：

<div class="ui grid container">
    <div class="left floated five wide column">
        <a class="ui green circular label"></a>
        {{this.email}}{{this.totalTimeExpire}}
    </div>
    <div class="right floated five wide column">
        {{this.timeRemaining}} remaining
    </div>
</div>

使用“容器”而不是“页面网格”，如果你正在使用语义-UI v1刚刚升级到SUI v2 (http://beta.semantic-ui.com)，它将在6月30日星期二发布，我认为不再支持SUI v1了。

PS："ui容器“被添加到SUI v2中

Answer 2

我不完全确定你在问什么，但是如果你只想做三列，为什么不用<ul>标签包装，并给出display:table和<li>标签的样式以及display:table-cell的样式，这将在定位列的时候给你很大的灵活性。

Answer 3

在2.1版本中，在撰写本文时的当前版本中，现在可以将网格划分为三列。

<div class="ui three column grid">
  <div class="column">
      <a class="ui green circular label"></a>
  </div>
  <div class="ten wide column">
      {{this.email}}{{this.totalTimeExpire}}
  </div>
  <div class="five wide column">
      {{this.timeRemaining}} remaining
  </div>
</div>