css - 无法在 .ui.page.grid 中获得 3 个等宽列

Question

我真的很难在页面布局中获得 3 列。

我只使用语义 CSS，暂时没有我自己的 CSS。我只是想把头绕在网格的东西上。

这是我的完整正文内容：

    <div class="ui page grid">
      <header class="sixteen wide column">
        <div class="ui segment">Header text.</div>
      </header>
      <div class="ui divided grid">
        <div class="eight wide column">
          <div class="ui segment">Left text</div>
        </div>
        <div class="eight wide column">
          <div class="ui segment">Right text</div>
        </div>
      </div>
      <div class="ui three column grid">
        <div class="column">
          <div class="ui segment">1</div>
        </div>
        <div class="column">
          <div class="ui segment">2</div>
        </div>
        <div class="column">
          <div class="ui segment">3</div>
        </div>
      </div>
      <footer class="sixteen wide column">
        <div class="ui segment">Footer text.</div>
      </footer>
    </div>

我了解如何获得全宽列 - 这很冗长，但它有效。

我还可以使用 .sixteen.wide.column 元素获得 2 个半角列。

但由于 16 不能被 3 整除，我试图用它来获得 3 列：

      <div class="ui three column grid">
        <div class="column">
          <div class="ui segment">1</div>
        </div>
        <div class="column">
          <div class="ui segment">2</div>
        </div>
        <div class="column">
          <div class="ui segment">3</div>
        </div>
      </div>

上面的代码来自此文档页面：http ://semantic-ui.com/collections/grid.html

我明白了，唉：

似乎宽度问题来自这个CSS：

 .ui.grid > .column, .ui.grid > .row > .column {
   width: 6.25%;
 }

不，我在任何地方都需要额外的课程，或者一些额外的标记？

太感谢了！

Answer 1

干得好：

<div class="ui three column grid">
  <div class="column">
    Content
  </div>
  <div class="column">
    Content
  </div>
  <div class="column">
    Content
  </div>
</div>

Answer 2

我有类似的问题！

它是这样完成的：

    <div class="ui divided grid stackable">

        <div class="three column row">

         <div class="column wide"> 
          <p> Your stuff here </p>
         </div>

         <div class="column wide">
         <p> Your stuff here </p>
         </div>

         <div class="column wide">
          <p> Your stuff here </p>
         </div>

        </div>

   </div>