将网格划分为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>

使用＆＃34;容器＆＃34;而不是＆＃34;页面网格＆＃34;，如果你正在使用Semantic-UI v1只升级到SUI v2（http://beta.semantic-ui.com），它将于6月30日星期二发布，我不认为SUI v1得到支持了。

PS：＆＃34; ui容器＆＃34;被添加到SUI v2

Answer 2

我不完全确定你在问什么，但是如果你只想制作三列，为什么不用template <class T> class tuple_size; // undefined 标签包裹并给出<ul>的样式和 样式为display:table的{​​{1}}代码，在定位列时会给您很多灵活性。

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>