Semantic-UI 网格行清除内容

在使用 Semantic-UI 的网格系统时，如果某个网格行中有内容过多，导致布局混乱，可以使用网格行清除内容的方法解决这个问题。

如何使用

在网格行之前，添加一个 ui clearing segment 的 div 元素，即可清除前面一行的浮动元素，使得布局得以重新排列。

示例代码：

<div class="ui clearing segment">
  <div class="ui two column grid">
    <div class="column">
      <h2>第一列</h2>
      <p>这里是第一列的内容，可以很长很长</p>
    </div>
    <div class="column">
      <h2>第二列</h2>
      <p>这里是第二列的内容，也可以很长很长</p>
    </div>
  </div>
</div>

在上述示例中，ui clearing segment div 元素用于清除上面的一行浮动元素，方便下一行的网格布局。

效果演示

在这个例子中，由于第一行的两个 column 元素都非常长，导致下一行的 column 元素无法正确布局。添加了一个 ui clearing segment 的 div 元素后，即可正确显示。

相关链接

• Semantic-UI 官方文档